<!DOCTYPE html>
<html lang="en">
    <head>
  <!-- 元数据 -->
  <meta charset="utf-8">
  <link rel="icon" href="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
  <title>Vue3 学习手册(博客版) | 小崔的博客</title>
  <meta name="author" content="cuishikang" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="format-detection" content="telphone=no, email=no" />
  
    <meta name="keywords" content="Vue3" />
  
  <meta name="description" content="::: tip 介绍下一个目标 全面拥抱Vue3时代 :::">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue3 学习手册(博客版)">
<meta property="og:url" content="https://cuishikang.gitee.io/2099/01/27/Vue3/1.1.1_Vue_study/index.html">
<meta property="og:site_name" content="小崔的博客">
<meta property="og:description" content="::: tip 介绍下一个目标 全面拥抱Vue3时代 :::">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta property="article:published_time" content="2099-01-26T16:00:00.000Z">
<meta property="article:modified_time" content="2022-02-19T10:22:58.543Z">
<meta property="article:author" content="cuishikang">
<meta property="article:tag" content="Vue3">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta name="twitter:site" content="@null">
  
  <!-- 站点验证相关 -->
  
    
    
    
  
  <!-- 样式表文件 -->
  <link rel="stylesheet" id="kratos-css" href="/css/kratosr.min.css" type="text/css" media="all">
  
    <link rel="stylesheet" id="highlight-css" href="/css/highlight/night-eighties.min.css" type="text/css" media="all">
  
  
  <link rel="stylesheet" id="fontawe-css" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" type="text/css" media="all">
  <link rel="stylesheet" id="nprogress-css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" type="text/css" media="all">
  
  
    <link rel="stylesheet" href="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.css">
  
  
    <link rel="stylesheet" href="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
  
  
    <link rel="stylesheet" id="darkmode-css" href="/css/kr-dark.min.css" type="text/css" media="all">
  
  <!-- 不得不预先加载的一些JS文件 -->
  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
  
    <script src="https://unpkg.com/qrcode_js@1.0.0/qrcode.min.js"></script>
  
  
  <style>
    
      .kratos-cover.kratos-cover-2 {
        background-image: url('/images/banner.webp');
      }
    
    
      @media(min-width:768px) {
        body.custom-background {
          background-image: url('/images/bg.webp');
        }
      }
    
  </style>
  
<meta name="generator" content="Hexo 6.0.0"></head>


    <body class="custom-background">
        <div id="kratos-wrapper">
    <div id="kratos-page">
        <div id="kratos-header">
            <header id="kratos-desktop-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="nav-header">
                        <nav id="kratos-menu-wrap">
                            <ul id="kratos-primary-menu" class="sf-menu">
                                
                                    
                                        <li><a href="/"><i class="fa fa-home"></i>首页</a></li>
                                    
                                
                                    
                                        <li><a href="/archives/"><i class="fa fa-file"></i>档案馆</a></li>
                                    
                                
                                    
                                        <li><a href="/friends/"><i class="fa fa-paw"></i>好伙伴</a></li>
                                    
                                
                                    
                                        <li>
                                            <a><i class="fa fa-link"></i>关于本人</a>
                                            <ul class="sub-menu">
                                                
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang"><i class="fa fa-git"></i>码云</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang/tmp/raw/master/img/2201645358312_.pic.jpg"><i class="fa fa-weixin"></i>微信</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://www.zhihu.com/people/fu-xi-ting-67-17-5"><i class="fa  fa-search"></i>知乎</a></li>
                                                    
                                                
                                                    
                                                        <li><a href="http://cuishikang.gitee.io/my_resume/#/"><i class="fa  fa-file-o"></i>简历</a></li>
                                                    
                                                
                                            </ul>
                                        </li>
                                    
                                
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <header id="kratos-mobile-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="color-logo"><a href="/">小崔的博客</a></div>
                    <div class="nav-toggle">
                        <a class="kratos-nav-toggle js-kratos-nav-toggle">
                            <i></i>
                        </a>
                    </div>
                </div>
            </header>
        </div>
        <div class="kratos-start kratos-hero-2">
            <!-- <div class="kratos-overlay"></div> -->
            <div class="kratos-cover kratos-cover-2 text-center">
                <div class="desc desc2 animate-box">
                    <a href="/">
                        <h2>小崔的博客</h2> <br />
                        <span></span>
                    </a>
                </div>
            </div>
        </div>

        <div id="kratos-blog-post">
            <div class="container">
                <div id="main" class="row">
                    

        

            <section class="col-md-8">

        

            <article>
    <div class="kratos-hentry kratos-post-inner clearfix">
        <header class="kratos-entry-header">
            
                <h1 class="kratos-entry-title text-center">Vue3 学习手册(博客版)</h1>
            
            
            <ul class="kratos-post-meta text-center">
                <li><i class="fa fa-calendar"></i> 2099-01-27</li>
                <li><i class="fa fa-user"></i> 作者 cuishikang</li>
                <li>
                    <i class="fa fa-edit"></i> 
                    
                    
                        ~55.11K
                    
                    字
                </li>
                
            </ul>
        </header>
        <div class="kratos-post-content">
            <div id="expire-alert" class="alert alert-warning hidden" role="alert">
                本文最后编辑于 <time datetime="1645266178543"></time> 前，其中的内容可能需要更新。
            </div>
            
            <hr />
            <p>::: tip 介绍<br>下一个目标 全面拥抱Vue3时代 <br><br>:::</p>
<span id="more"></span>

<h2 id="Vue3的特性"><a href="#Vue3的特性" class="headerlink" title="Vue3的特性"></a>Vue3的特性</h2><blockquote>
<p>目标：了解vue3现状，以及它的优点，展望它的未来</p>
</blockquote>
<ol>
<li>Vue3现状：</li>
</ol>
<ul>
<li><a target="_blank" rel="noopener" href="https://github.com/vuejs/vue-next/">vue-next</a> 2020年09月18日，正式发布vue3.0版本。但由于刚发布周边生态不支持，大多数开发者处于观望。</li>
<li>现在主流组件库都已经发布了支持vue3.0的版本，其他生态也在不断地完善中，这是趋势。<ul>
<li><a target="_blank" rel="noopener" href="https://element-plus.org/#/zh-CN">element-plus</a>   基于 Vue 3.0 的桌面端组件库 </li>
<li><a target="_blank" rel="noopener" href="https://vant-contrib.gitee.io/vant/v3/#/zh-CN">vant</a>  vant3.0版本，有赞前端团队开源移动端组件库 </li>
<li><a target="_blank" rel="noopener" href="https://2x.antdv.com/components/overview/">ant-design-vue</a>   Ant Design Vue 2.0版本，社区根据蚂蚁 ant design 开发</li>
</ul>
</li>
</ul>
<ol start="2">
<li>Vue3优点：</li>
</ol>
<ul>
<li>数据具备响应式 无需调用<code>$set</code>方法</li>
<li>最火框架，它是国内最火的前端框架之一，<a target="_blank" rel="noopener" href="https://v3.vuejs.org/">官方文档</a>  <a target="_blank" rel="noopener" href="https://v3.cn.vuejs.org/">中文文档</a></li>
<li>性能提升，运行速度事vue2.x的1.5倍左右</li>
<li>体积更小，按需编译体积比vue2.x要更小</li>
<li>类型推断，更好的支持Ts（typescript）这个也是趋势（js的超集）</li>
<li>高级给予，暴露了更底层的API和提供更先进的内置组件</li>
<li><font color=#ff3040><strong>★选项API—–组合API (composition api)</strong>  ，能够更好的组织逻辑，封装逻辑，复用逻辑</font></li>
</ul>
<ol start="3">
<li><p>Vue3展望：</p>
<ul>
<li>这是趋势，越来越多的企业将来肯定会升级到Vue3.0</li>
<li>大型项目，由于对Ts的友好越来越多大型项目可以用Vue3.0</li>
</ul>
</li>
<li><p><font color =#ff3040>个人展望</font></p>
<ul>
<li>全面拥抱Vue3 有机会学习TS语言</li>
</ul>
</li>
</ol>
<blockquote>
<p><strong>总结：</strong> 为什么要学 vue3 ?</p>
<p>适应市场学习流行的技术提高提升自己竞争力，给自己加薪。</p>
</blockquote>
<h2 id="创建Vue应用"><a href="#创建Vue应用" class="headerlink" title="创建Vue应用"></a>创建Vue应用</h2><blockquote>
<p>目标：掌握如何创建vue3应用实例</p>
</blockquote>
<ol>
<li>基于Vue脚手架创建项目</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 1. 安装脚手架</span></span><br><span class="line">npm i @vue/cli -g</span><br><span class="line"><span class="comment"># 2. 创建vue3项目（选项中选择v3版本，其他和之前一样）不能有大写</span></span><br><span class="line">vue create 项目名称</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>项目代码结构分析</li>
</ol>
<p>落地代码：</p>
<ul>
<li>跟组件<code>App.vue</code></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- 模板中不要求有唯一的跟节点 --&gt;</span><br><span class="line">  &lt;div id=&quot;nav&quot;&gt;</span><br><span class="line">    &lt;router-link to=&quot;/&quot;&gt;Home&lt;/router-link&gt; |</span><br><span class="line">    &lt;router-link to=&quot;/about&quot;&gt;About&lt;/router-link&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">  &lt;router-view /&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;style lang=&quot;less&quot;&gt;&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>入口文件<code>main.js</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Vue2.0的导入方法</span></span><br><span class="line"><span class="comment">// import Vue from &#x27;vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Vue3.0的导入方法</span></span><br><span class="line"><span class="comment">// 这种导入API的方式可以减少打包后代码的体积（按需导入）</span></span><br><span class="line"><span class="keyword">import</span> &#123; createApp &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">&#x27;./router&#x27;</span></span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Vue3的写法</span></span><br><span class="line"><span class="comment">// createApp(App)的返回值是 Vue实例对象</span></span><br><span class="line"><span class="comment">// use方法用于配置插件(导入插件时候 需要这样导入)</span></span><br><span class="line"><span class="title function_">createApp</span>(<span class="title class_">App</span>).<span class="title function_">use</span>(store).<span class="title function_">use</span>(router).<span class="title function_">mount</span>(<span class="string">&#x27;#app&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// Vue2的写法</span></span><br><span class="line"><span class="comment">// new Vue(&#123;</span></span><br><span class="line"><span class="comment">//   router,</span></span><br><span class="line"><span class="comment">//   store,</span></span><br><span class="line"><span class="comment">//   render: h =&gt; h(App)</span></span><br><span class="line"><span class="comment">// &#125;).$mount(&#x27;#app&#x27;)</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p><strong>总结：</strong>  </p>
<ol>
<li>如何创建vue应用实例？createApp</li>
<li>如何创建路由实例？createRouter</li>
<li>如何创建Store实例？createStore</li>
</ol>
<p>注意：模板中可以没有唯一的跟节点。</p>
</blockquote>
<h2 id="选项API和组合API"><a href="#选项API和组合API" class="headerlink" title="选项API和组合API"></a>选项API和组合API</h2><blockquote>
<p>目标：理解什么是选项API写法，什么是组合API写法。</p>
<ol>
<li>选项API，之前写代码的风格，代码都是写到组件的配置选项中（methods&#x2F;props&#x2F;computed….）</li>
<li>组合API，代码不再完全写到选项中，而是有新的规则</li>
</ol>
</blockquote>
<ul>
<li>选项API与组合API对比分析</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/ztBRcGELHWXrdwy.png" alt="image-20210716210942387"></p>
<p>什么是选项API写法：<code>Options ApI</code></p>
<ul>
<li>咱们在vue2.x项目中使用的就是 <code>选项API</code> 写法<ul>
<li>代码风格：data选项写数据，methods选项写函数…，一个功能逻辑的代码分散。</li>
<li>优点：易于学习和使用，写代码的位置已经约定好</li>
<li>缺点：代码组织性差，相似的逻辑（功能）代码不便于复用，逻辑复杂代码多了不好阅读。</li>
</ul>
</li>
</ul>
<p>什么是组合API：Composition API</p>
<ul>
<li>以功能为单位组织代码结构，后续重用功能更加方便。</li>
<li><font color = #ff3040>Vue中导入方法 需要用 import按需加载 才可以在 <code>setup()</code>里面使用该方法</font></li>
</ul>
<blockquote>
<p><strong>总结：</strong> 知道选项API和组合API的写法区别，建议大家使用组合API在vue3.0项目中。</p>
</blockquote>
<h2 id="组合API-setup-设置组合api方法"><a href="#组合API-setup-设置组合api方法" class="headerlink" title="组合API setup() 设置组合api方法"></a>组合API <code>setup()</code> 设置组合api方法</h2><blockquote>
<p>目标：掌握<code>setup()</code>函数的基本使用</p>
<p>作用: 几乎所有的js逻辑代码都是写到setup方法里</p>
</blockquote>
<p><font color = #ff3040>setup()是什么：</font></p>
<ul>
<li><p><code>setup()</code> 一般只能执行一次 如果数据动态修改 需要用<code>watch</code>监听</p>
<ul>
<li>就比如 动态获取路由数据的时候 需要重新调用路由数据 获取相应的动态路由数据<ul>
<li>如果监控的一级路由 存在二级路由 需要屏蔽</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 储存一级分类相关的商品数据</span></span><br><span class="line"> <span class="keyword">const</span> goods = <span class="title function_">ref</span>([])</span><br><span class="line"> <span class="comment">// watch监听动态获取的路由数据 然后重新获取新的路由数据 </span></span><br><span class="line"> <span class="title function_">watch</span>(<span class="function">() =&gt;</span> route.<span class="property">params</span>.<span class="property">id</span>, <span class="function">(<span class="params">newId</span>) =&gt;</span> &#123;</span><br><span class="line">     <span class="comment">// 获取路由数据</span></span><br><span class="line">   <span class="title function_">findTopCategory</span>(newId).<span class="title function_">then</span>(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">       <span class="comment">// 储存一级分类相关的商品数据</span></span><br><span class="line">     goods.<span class="property">value</span> = data.<span class="property">result</span>.<span class="property">children</span></span><br><span class="line">   &#125;)</span><br><span class="line"> &#125;, &#123;</span><br><span class="line">     <span class="comment">// 页面加载时候 启动监控(相当于生命周期 打开页面调用)</span></span><br><span class="line">   <span class="attr">immediate</span>: <span class="literal">true</span></span><br><span class="line"> &#125;)</span><br></pre></td></tr></table></figure>
</li>
<li><p><code>setup()</code> 是一个新的组件选项，作为组件中使用组合API的起点(把一个功能全部组合起来)</p>
</li>
<li><p><code>setup()</code>调用的时间相当于Vue2的<code> created()</code> 执行在组件创建之前</p>
<ul>
<li><font color = #ff3040>无法使用this 需要在结尾<code>return</code>出去</font></li>
<li>这就意味着在<code>setup()</code>函数中 <code>this</code> 还不是组件实例，<code>this</code> 此时是 <code>undefined</code></li>
</ul>
</li>
<li><p>在模版中需要使用的数据和函数，需要在 <code>setup()</code>中<code>return</code>出去。</p>
</li>
<li><p><font color = #ff3040>Vue中导入方法 需要用 import按需加载 才可以在 <code>setup()</code>里面使用该方法</font></p>
</li>
<li><p><code>setup()</code> 在同一个组件中 不可以多次调用</p>
</li>
</ul>
<blockquote>
<p>演示代码</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- 模板中不要求有唯一的根节点 --&gt;</span><br><span class="line">  &lt;div id=&quot;nav&quot;&gt;</span><br><span class="line">    &lt;router-link to=&quot;/&quot;&gt;Home&lt;/router-link&gt; |</span><br><span class="line">    &lt;router-link to=&quot;/about&quot;&gt;About&lt;/router-link&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;!-- 设置点击事件 --&gt;</span><br><span class="line">      &lt;button @click=&quot;fn&quot;&gt;点我&lt;/button&gt;</span><br><span class="line">      &lt;!-- 差值表达式插进去 --&gt;</span><br><span class="line">      &#123;&#123;msg&#125;&#125;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">  &lt;router-view /&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;App&#x27;,</span><br><span class="line">  setup () &#123;</span><br><span class="line">    // setup函数的触发时机发生在(生命周期函数)之前 此时组件尚未创建 不可以用this</span><br><span class="line">    // 在该函数中是没有this的 此时Vue组件实例尚未创建成功</span><br><span class="line"></span><br><span class="line">    // setup () 该函数返回值用于给组件模板提供信息(数据和函数)</span><br><span class="line">    // 设置一个常量</span><br><span class="line">    const msg = &#x27;hello&#x27; // 默认定义的数据不是响应式的 需要单独设置相应式</span><br><span class="line">    // 设置一个方法</span><br><span class="line">    const fn = () =&gt; &#123;</span><br><span class="line">      console.log(&#x27;这个是方法&#x27;)</span><br><span class="line">    &#125;</span><br><span class="line">    // setup ()储存的数据 方法 需要return出去使用 无需this</span><br><span class="line">    // 返回设置的数据 和 设置的方法</span><br><span class="line">    return &#123;</span><br><span class="line">      msg,</span><br><span class="line">      fn</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><strong>总结：</strong> <code>setup</code> 组件初始化之前执行，它返回的数据和函数可在模版使用。</p>
<p>注意：该函数不可以访问this，this的值为undefined</p>
<h2 id="组合API-声明周期-钩子函数"><a href="#组合API-声明周期-钩子函数" class="headerlink" title="组合API 声明周期(钩子函数)"></a>组合API <code>声明周期(钩子函数)</code></h2><blockquote>
<p>目标：掌握使用组合API写法的生命周期钩子函数</p>
</blockquote>
<ul>
<li><font color = #ff3040>Vue中导入方法 需要用 import按需加载 才可以在 <code>setup()</code>里面使用该方法</font></li>
<li>Vue3中也支持 Vue2里面的声明周期 但是不推荐</li>
<li>Vue3声明周期都是函数 需要用箭头函数方法设置</li>
<li><font color = #ff3040>Vue3中的生命周期(钩子函数)</font><ul>
<li><code>onBeforeMount(()=&gt;&#123; &#125;)</code>  挂载DOM前 (常用)</li>
<li><code>onMounted(()=&gt;&#123; &#125;)</code> 挂载DOM后 (常用)</li>
<li><code>setup(()=&gt;&#123; &#125;)</code> 创建实例前 (实际上就是Vue2 的<code>created</code>)</li>
<li><code>onBeforeUpdate(()=&gt;&#123; &#125;)</code> 更新组件前</li>
<li><code>onUpdated(()=&gt;&#123; &#125;)</code> 更新组件后</li>
<li><code>onBeforeUnmount(()=&gt;&#123; &#125;)</code> 卸载销毁前</li>
<li><code>onUnmounted(()=&gt;&#123; &#125;)</code>  卸载销毁后</li>
</ul>
</li>
</ul>
<blockquote>
<p> 对比vue2.x  左Vue2 -&gt; 右Vue3</p>
</blockquote>
<ul>
<li><code>beforeCreate</code> -&gt; <code>setup()</code></li>
<li><code>created</code> -&gt;  <code>setup()</code></li>
<li><code>beforeMount</code> -&gt; <code>onBeforeMount</code></li>
<li><code>mounted</code> -&gt; <code>onMounted</code></li>
<li><code>beforeUpdate</code> -&gt; <code>onBeforeUpdate</code></li>
<li><code>updated</code> -&gt; <code>onUpdated</code></li>
<li><code>beforeDestroy</code> -&gt; <code>onBeforeUnmount</code></li>
<li><code>destroyed</code> -&gt; <code>onUnmounted</code></li>
<li><code>errorCaptured</code> -&gt; <code>onErrorCaptured</code></li>
</ul>
<p><font color =#ff3040>所有的声明周期方法 都可以在<code>setup()</code> 里面多次调用 (一样声明周期按js默认顺序排序)</font></p>
<blockquote>
<p>演示代码</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;container&quot;&gt;</span><br><span class="line">    container</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    // 必须按需导入 Vue3组合api</span><br><span class="line">import &#123; onBeforeMount, onMounted &#125; from &#x27;vue&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  setup () &#123;</span><br><span class="line">      // DOM渲染前调用onBeforeMount方法</span><br><span class="line">    onBeforeMount(()=&gt;&#123; // 声明周期是函数方法</span><br><span class="line">      console.log(&#x27;DOM渲染前&#x27;,document.querySelector(&#x27;.container&#x27;))</span><br><span class="line">    &#125;)</span><br><span class="line">     // DOM渲染后调用onMounted方法</span><br><span class="line">    onMounted(()=&gt;&#123;</span><br><span class="line">      console.log(&#x27;DOM渲染后1&#x27;,document.querySelector(&#x27;.container&#x27;))</span><br><span class="line">    &#125;)</span><br><span class="line">     //  setup () 里面可以多次调用一样的声明周期方法</span><br><span class="line">    onMounted(()=&gt;&#123;</span><br><span class="line">      console.log(&#x27;DOM渲染后2&#x27;,document.querySelector(&#x27;.container&#x27;))</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>总结：</strong> </p>
<ol>
<li>组合API的生命周期钩子有7个，</li>
<li>可以多次使用同一个钩子，</li>
<li>执行顺序和书写顺序相同。</li>
</ol>
<p>注意：</p>
<ol>
<li>兼容Vue2的生命周期，但是不建议在Vue3的项目中使用Vue2的API</li>
<li>beforeCreate和created生命周期在Vue3中被setup替代了</li>
<li>Vue3的生命周期直接也是在setup中进行触发，函数名称前面都添加on</li>
</ol>
<h3 id="组件拆分后-导入-生命周期"><a href="#组件拆分后-导入-生命周期" class="headerlink" title="组件拆分后 导入 生命周期"></a><strong>组件拆分后 导入 <code>生命周期</code></strong></h3><ul>
<li>如果子组件设置了生命周期 那么必须在父组件引入该生命周期 <ul>
<li>子组件的声明生命周期 设置为常量 传给父组件让父组件的生命周期调用该变量</li>
</ul>
</li>
</ul>
<blockquote>
<p>调用例子</p>
</blockquote>
<ul>
<li>子组件的设置 <code>js文件</code><ul>
<li>子组件的生命周期设置为常量 进行导出</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入 Vue3的ref方法</span></span><br><span class="line"><span class="keyword">import</span> &#123; ref &#125; <span class="keyword">from</span> <span class="string">&#x27;@vue/reactivity&#x27;</span></span><br><span class="line"><span class="comment">// 导入 Vue3的computed方法</span></span><br><span class="line"><span class="keyword">import</span> &#123; computed &#125; <span class="keyword">from</span> <span class="string">&#x27;@vue/runtime-core&#x27;</span></span><br><span class="line"><span class="comment">// 设置一个常量</span></span><br><span class="line"><span class="keyword">const</span> retx = <span class="title function_">ref</span>(<span class="number">1</span>)</span><br><span class="line"><span class="comment">// 设置函数方法</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">changeN</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  retx.<span class="property">value</span> += <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 设置计算属性</span></span><br><span class="line"><span class="keyword">const</span> newretx = <span class="title function_">computed</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> retx.<span class="property">value</span> + <span class="number">1</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//! 设置需要导出的生命周期</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">onMounted</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  <span class="title function_">changeN</span>()</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 设置需要导出的数据内容</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  onMounted,</span><br><span class="line">  changeN,</span><br><span class="line">  newretx,</span><br><span class="line">  retx</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li>父组件的设置 <code>vue文件</code><ul>
<li>父组件接收子组件的生命周期常量 导入其自身的生命周期中</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- 模板中不要求有唯一的根节点 --&gt;</span><br><span class="line">  &lt;div id=&quot;nav&quot;&gt;</span><br><span class="line">    &lt;div&gt;我的初始值&#123;&#123;retx&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;div&gt;我的更新值&#123;&#123;newretx&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;button @click=&quot;changeN&quot;&gt;点我&lt;/button&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">// 导入子组件</span><br><span class="line">import model from &#x27;./views/model/demob&#x27;</span><br><span class="line">// 导入Vue3的生命周期</span><br><span class="line">import &#123; onMounted &#125; from &#x27;@vue/runtime-core&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  setup () &#123;</span><br><span class="line">    // 导入子组件设置的声明周期</span><br><span class="line">    onMounted(() =&gt; model.onMounted)</span><br><span class="line">    // 把子组件的所有数据 导入到父组件中用来调用(声明周期可以不直接导入)</span><br><span class="line">    return &#123; ...model &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="组合API-reactive-设置多个复杂对象响应式数据-我用"><a href="#组合API-reactive-设置多个复杂对象响应式数据-我用" class="headerlink" title="组合API reactive() 设置多个复杂对象响应式数据 (我用)"></a>组合API <code>reactive()</code> 设置多个复杂对象响应式数据 (我用)</h2><blockquote>
<p>目标：掌握使用reactive函数定义响应式数据(多个数据的对象)</p>
</blockquote>
<ul>
<li><font color = #ff3040>Vue中导入方法 需要用 import按需加载 才可以在 <code>setup()</code>里面使用该方法</font></li>
<li><code>reactive()</code>是一个函数，它可以定义一个复杂数据类型，成为响应式数据。<ul>
<li>通常用const直接设置的值 不是响应式 数据修改时候 不会动态修改 需要设置<code>reactive()</code>方法</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- 模板中不要求有唯一的根节点 --&gt;</span><br><span class="line">  &lt;div id=&quot;nav&quot;&gt;</span><br><span class="line">    &lt;button @click=&quot;change&quot;&gt;点击&lt;/button&gt;</span><br><span class="line">    &lt;div&gt;&#123;&#123;ret.name&#125;&#125;&lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">  &lt;router-view /&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">// 按需导入reactive()方法</span><br><span class="line">import &#123; reactive &#125; from &#x27;vue&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  setup (props) &#123;</span><br><span class="line">// 把设置的常量数据 变为响应式数据 这样数据更新的时候 可以及时更新到设置的数据</span><br><span class="line">    const ret = reactive(&#123;</span><br><span class="line">      name: &#x27;你好&#x27;,</span><br><span class="line">      age: &#x27;500&#x27;</span><br><span class="line">    &#125;)</span><br><span class="line">// 设置更新数据的方法</span><br><span class="line">    const change = () =&gt; &#123;</span><br><span class="line">      ret.name = &#x27;万岁&#x27;</span><br><span class="line">    &#125;</span><br><span class="line">// 返回设置的数据 和 设置的方法</span><br><span class="line">    return &#123; ret, name &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>可以设置多个<code>reactive()</code> 但是用 <code>toRefs()</code> 解构的数据只能存在一个</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 第一个reactive()</span></span><br><span class="line">   <span class="keyword">const</span> data = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">     <span class="comment">// 声明 scrollReveal组件</span></span><br><span class="line">     <span class="attr">scrollReveal</span>: <span class="title function_">scrollReveal</span>(),</span><br><span class="line">     <span class="comment">// 打字机内容</span></span><br><span class="line">     <span class="attr">typewriter</span>: res.<span class="property">my_typewriter</span>,</span><br><span class="line">   &#125;)</span><br><span class="line">   <span class="comment">// 第二个reactive()</span></span><br><span class="line">   <span class="keyword">const</span> state = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">    <span class="comment">// 顶部显示的状态位</span></span><br><span class="line">     <span class="attr">header</span>: <span class="number">0</span></span><br><span class="line">   &#125;)</span><br><span class="line">    <span class="comment">// 结构导出 只能结构一个reactive() 不能结构多个</span></span><br><span class="line">   <span class="keyword">const</span> dataOut = <span class="title function_">toRefs</span>(data)</span><br><span class="line">   <span class="comment">// 结构导出 只能结构一个reactive() 不能结构多个</span></span><br><span class="line">   <span class="keyword">return</span> &#123; ...dataOut, state, gotoCV &#125;</span><br></pre></td></tr></table></figure>



<p><strong>总结：</strong> 通常是用来定义响应式<strong>对象数据</strong></p>
<h2 id="组合API-ref-设置单个简单的响应式数据-我不用"><a href="#组合API-ref-设置单个简单的响应式数据-我不用" class="headerlink" title="组合API ref() 设置单个简单的响应式数据 (我不用)"></a>组合API <code>ref()</code> 设置单个简单的响应式数据 (我不用)</h2><blockquote>
<p>目标：掌握使用ref函数定义响应式数据，一般用于简单类型数据(单个数据 单个数组)</p>
</blockquote>
<ul>
<li>ref函数，常用于简单数据类型定义为响应式数据</li>
<li><code>watch()</code>监听 <code>ref</code>简单数据时候初始值不能为null 可以用<code>reactive()</code>来设置null</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/YGWyVm5riUNn83Q.png" alt="image-20210727121921553"></p>
<ul>
<li>ref函数 可以储存 字符串 和 数组(数组中可包裹对象) (单个数据 单个数组)<ul>
<li>在修改值，获取值的时候 <font color = #ff3040>需要.value</font></li>
<li>在模板中使用ref申明的响应式数据 <font color =#ff3040>可以省略.value</font></li>
</ul>
</li>
<li>如果ref的值 在模板<code>template</code>中进行数据修改时候 无需添加<code>.value</code> 因为能在模板中修改的值 都不需要添加<code>.value</code></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;container&quot;&gt;</span><br><span class="line">      &lt;!-- 在模板中使用ref申明的响应式数据，可以省略.value --&gt;</span><br><span class="line">    &lt;div&gt;&#123;&#123;name&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;div&gt;&#123;&#123;age&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;button @click=&quot;updateName&quot;&gt;修改数据&lt;/button&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">import &#123; ref &#125; from &#x27;vue&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;App&#x27;,</span><br><span class="line">  setup () &#123;</span><br><span class="line">    // 1.name数据</span><br><span class="line">    const name = ref(&#x27;ls&#x27;)</span><br><span class="line">    console.log(name)</span><br><span class="line">    const updateName = () =&gt; &#123;</span><br><span class="line">        // 在修改值获取值的时候，需要.value</span><br><span class="line">      name.value = &#x27;zs&#x27;</span><br><span class="line">    &#125;</span><br><span class="line">    // 2.age数据</span><br><span class="line">    const age = ref(10)</span><br><span class="line"></span><br><span class="line">    // ref常用定义简单数据类型的响应式数据</span><br><span class="line">    // 其实也可以定义复杂数据类型的响应式数据</span><br><span class="line">    // 对于数据未之的情况下 ref 是最适用的</span><br><span class="line">    return &#123;name, age, updateName&#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>总结</p>
<ol>
<li>当你明确知道需要的是一个响应式数据  <em>对象</em>  那么就使用 reactive 即可 其他情况使用ref</li>
</ol>
<h2 id="组合API-toRefs-解构响应数据-我用"><a href="#组合API-toRefs-解构响应数据-我用" class="headerlink" title="组合API toRefs() 解构响应数据 (我用)"></a>组合API <code>toRefs()</code> 解构响应数据 (我用)</h2><ul>
<li><code>toRefs()</code>有两个场景 <ul>
<li>第一个是 解构<code>reactive()</code>声明的数据 可以去除命名的变量 结构方便调用场景</li>
<li>第二个是 父子传值的时候 接收父组件传来的参数 自动解构 直接调用即可</li>
</ul>
</li>
<li><font color = #ff3040>Vue中导入方法 需要用 import按需加载 才可以在 <code>setup()</code>里面使用该方法</font></li>
<li><font color=#ff3040>结构后获取内部数据值的时候需要加.value 如果<code>return</code>不需要value</font></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 使用了解构赋值语法创建了变量myTitle</span></span><br><span class="line"><span class="keyword">const</span> &#123; myTitle &#125; = <span class="title function_">toRefs</span>(props)</span><br><span class="line"><span class="comment">// 使用数据的时候 必须要加value</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(myTitle.<span class="property">value</span>)</span><br></pre></td></tr></table></figure>

<h3 id="结构方便调用场景"><a href="#结构方便调用场景" class="headerlink" title="结构方便调用场景"></a><strong>结构方便调用场景</strong></h3><blockquote>
<p>目标：掌握使用<code>toRefs()</code>函数转换响应式对象中<strong>某个</strong>属性为单独响应式数据，并且值是关联的。</p>
<p>使用场景：把<code>reactive()</code>里面单独的响应式数据 进行单独拆分时候使用</p>
</blockquote>
<ul>
<li>单独定义响应式数据(在多个响应式中 提取单独一个的值)<ul>
<li><code>toRefs()</code> 和 <code>reactive()</code> 相互关联 <ul>
<li><code>reactive()</code> 定义了多个响应式 如果想单独调用 需要用到<code>toRefs()</code> 单独调用出来(需要<code>return</code>返回)</li>
<li>如果你没有结构 想把 <code>reactive()</code>数据全部导出 就需要扩展运算符<code>...</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<blockquote>
<p>演示代码</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;div class=&quot;overall-header&quot;&gt;</span><br><span class="line">        &lt;!-- 4.通过toRefs解构后可以直接调用哦 --&gt;</span><br><span class="line">      &lt;div id=&quot;reveal-top&quot; class=&quot;overall-header-left&quot;&gt;&#123;&#123; name &#125;&#125;&lt;/div&gt;</span><br><span class="line">      &lt;div class=&quot;overall-header-right&quot; /&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">import &#123; reactive, toRefs &#125; from &#x27;vue&#x27;</span><br><span class="line">import scrollReveal from &#x27;scrollreveal&#x27;</span><br><span class="line"></span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;Home&#x27;,</span><br><span class="line">  components: &#123;</span><br><span class="line">  &#125;,</span><br><span class="line">  setup () &#123;</span><br><span class="line">      // 1.reactive()声明数值</span><br><span class="line">    const ret = reactive(&#123;</span><br><span class="line">      age: 22</span><br><span class="line">      name: &#x27;你好&#x27;</span><br><span class="line">    &#125;)</span><br><span class="line">    // 2.通过toRefs()结构声明的数值</span><br><span class="line">    const retOut = toRefs(ret)</span><br><span class="line">    // 3.记得通过扩展运算符导出</span><br><span class="line">    return &#123; ...retOut &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>可以设置多个<code>reactive()</code> 但是用 <code>toRefs()</code> 解构的数据只能存在一个</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 第一个reactive()</span></span><br><span class="line">   <span class="keyword">const</span> data = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">     <span class="comment">// 声明 scrollReveal组件</span></span><br><span class="line">     <span class="attr">scrollReveal</span>: <span class="title function_">scrollReveal</span>(),</span><br><span class="line">     <span class="comment">// 打字机内容</span></span><br><span class="line">     <span class="attr">typewriter</span>: res.<span class="property">my_typewriter</span>,</span><br><span class="line">   &#125;)</span><br><span class="line">   <span class="comment">// 第二个reactive()</span></span><br><span class="line">   <span class="keyword">const</span> state = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">    <span class="comment">// 顶部显示的状态位</span></span><br><span class="line">     <span class="attr">header</span>: <span class="number">0</span></span><br><span class="line">   &#125;)</span><br><span class="line">    <span class="comment">// 结构导出 只能结构一个reactive() 不能结构多个</span></span><br><span class="line">   <span class="keyword">const</span> dataOut = <span class="title function_">toRefs</span>(data)</span><br><span class="line">   <span class="comment">// 结构导出 只能结构一个reactive() 不能结构多个</span></span><br><span class="line">   <span class="keyword">return</span> &#123; ...dataOut, state, gotoCV &#125;</span><br></pre></td></tr></table></figure>



<h3 id="父子传值场景"><a href="#父子传值场景" class="headerlink" title="父子传值场景"></a><strong>父子传值场景</strong></h3><ul>
<li>toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。</li>
<li>常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题。</li>
<li>toRefs后的ref数据如果是复杂类型数据时，不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据</li>
<li>作用其实和 toRef 类似，只不过 toRef 是对一个个属性手动赋值，而 toRefs 是自动解构赋值。</li>
</ul>
<blockquote>
<p>演示代码</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; defineComponent, toRefs &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title function_">defineComponent</span>(&#123;</span><br><span class="line">    <span class="comment">// 1. 接收父组件传来的参数</span></span><br><span class="line">  <span class="attr">props</span>: [title],</span><br><span class="line">  </span><br><span class="line">  setup (props) &#123;</span><br><span class="line">    <span class="comment">// 2. 使用了解构赋值语法创建了变量myTitle</span></span><br><span class="line">    <span class="keyword">const</span> &#123; myTitle &#125; = <span class="title function_">toRefs</span>(props)</span><br><span class="line">    <span class="comment">// 3. 内部使用数据的时候 必须要加value</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(myTitle.<span class="property">value</span>)</span><br><span class="line">      <span class="comment">// 4. return的时候 不需要带.value</span></span><br><span class="line">    <span class="keyword">return</span> &#123; myTitle &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li><code>toRef()</code> 就不介绍了 和上面一样</li>
</ul>
<h2 id="响应式数据使用规范"><a href="#响应式数据使用规范" class="headerlink" title="响应式数据使用规范"></a>响应式数据使用规范</h2><ul>
<li>尽量不要混着用，<code>reactive</code> 和 <code>ref</code> 选一种，<code>toRef</code> 和 <code>toRefs</code> 选一种，不然代码会很乱。</li>
<li>我喜欢<code>reactive</code> 和<code>toRefs</code> 搭配使用 y</li>
</ul>
<h2 id="组合API-computed计算属性"><a href="#组合API-computed计算属性" class="headerlink" title="组合API computed计算属性"></a>组合API <code>computed</code>计算属性</h2><blockquote>
<p>目标：掌握使用computed函数定义计算属性</p>
</blockquote>
<ul>
<li><p><font color = #ff3040>Vue中导入方法 需要用 import按需加载 才可以在 <code>setup()</code>里面使用该方法</font></p>
</li>
<li><p>计算属性不需要设置响应式数据(<code>ref</code> <code>toref</code> 数据本身就是动态计算的)</p>
</li>
<li><p>计算属性的原数据被修改时候 会触发计算属性 同步更新新的数据(<code>setup()</code> 只能触发一次) 相当于响应式</p>
</li>
<li><p>计算属性不支持异步(掉接口)只支持同步 <code>async</code>和<code>promise</code></p>
</li>
<li><p><code>computed</code>函数，是用来定义计算属性的，计算属性不能修改。</p>
<ul>
<li>计算属性自带执行 无需放在生命周期中调用 写完即可</li>
</ul>
</li>
<li><p>计算属性如果在模板中调用 需要设置判断 因为计算属性有延迟 所有需要判断 否则会报错1</p>
</li>
<li><p>计算属性不可以修改原来的数据 比如 <code>push()</code>进去一个新数据 如果需要修改原数据 需要创建一个新的变量 接收修改后的数据</p>
<ul>
<li>计算属性接的值 如果调用 需要 <code>变量名.value</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 创建一个计算属性 并且设置变量接收</span></span><br><span class="line"><span class="keyword">const</span> list = <span class="title function_">computed</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    &#125;)</span><br><span class="line"><span class="comment">// 如果想调用计算属性接收的变量 需要.value</span></span><br><span class="line">list.<span class="property">value</span> </span><br></pre></td></tr></table></figure></li>
</ul>
<blockquote>
<p>演示例子</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;container&quot;&gt;</span><br><span class="line">    &lt;div&gt;今年：&#123;&#123;age&#125;&#125;岁&lt;/div&gt;</span><br><span class="line">    &lt;div&gt;后年：&#123;&#123;newAge&#125;&#125;岁&lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">import &#123; computed, ref &#125; from &#x27;vue&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;App&#x27;,</span><br><span class="line">  setup () &#123;</span><br><span class="line">    // 1. 计算属性：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。</span><br><span class="line">    const age = ref(16)</span><br><span class="line">    // 得到后年的年龄</span><br><span class="line">    const newAge = computed(()=&gt;&#123;</span><br><span class="line">      // 该函数的返回值就是计算属性的值</span><br><span class="line">      return age.value + 2</span><br><span class="line">    &#125;)</span><br><span class="line"></span><br><span class="line">    return &#123;age, newAge&#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h3 id="computed计算属性-高级使用方法"><a href="#computed计算属性-高级使用方法" class="headerlink" title="computed计算属性 高级使用方法"></a><code>computed</code>计算属性 高级使用方法</h3><ul>
<li>计算属性的高级写法 <code>get()</code> 和 <code>set()</code> 无需设置<code>return</code><ul>
<li><code>get()</code>进行普通的计算流程</li>
<li><code>set(v)</code>在<code>get()</code>处理前修改需要计算数据 v是接收其数据</li>
</ul>
</li>
</ul>
<blockquote>
<p>演示例子</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- 模板中不要求有唯一的根节点 --&gt;</span><br><span class="line">  &lt;div id=&quot;nav&quot;&gt;</span><br><span class="line">    &lt;div&gt;我的初始值&#123;&#123;ret&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;div&gt;我的更新值&#123;&#123;newRet&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;button @click=&quot;changeN&quot;&gt;点我&lt;/button&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">// 导入子组件</span><br><span class="line">// 导入Vue3的生命周期</span><br><span class="line">import &#123; computed, ref &#125; from &#x27;@vue/runtime-core&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  setup () &#123;</span><br><span class="line">    // 设置一个要修改的常量</span><br><span class="line">    const ret = ref(1)</span><br><span class="line">    const newRet = computed(&#123;</span><br><span class="line">      // 计算属性的高级用法</span><br><span class="line">      get () &#123; // get()是普通的计算处理数据</span><br><span class="line">        return ret.value + 1</span><br><span class="line">      &#125;,</span><br><span class="line">      set (v) &#123; // set(v)在get()处理前修改需要计算数据 v是接收其数据</span><br><span class="line">        ret.value = v</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">    // 点击按钮 把计算属性的数据进行修改</span><br><span class="line">    const changeN = () =&gt; &#123;</span><br><span class="line">      ret.value = 18</span><br><span class="line">    &#125;</span><br><span class="line">    // 返回数据</span><br><span class="line">    return &#123; changeN, ret, newRet &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>目的：让计算属性支持双向数据绑定（可以更新计算属性的值，其实就是调用set方法）</p>
<p>总结：计算属性两种用法</p>
<ul>
<li>给computed传入函数，返回值就是计算属性的值</li>
<li>给computed传入对象，get获取计算属性的值，set监听计算属性改变。</li>
</ul>
<h2 id="组合API-watch-函数方法-监听数据"><a href="#组合API-watch-函数方法-监听数据" class="headerlink" title="组合API watch()函数方法 监听数据"></a>组合API <code>watch()</code>函数方法 监听数据</h2><blockquote>
<p>目标：掌握使用watch函数定义侦听器</p>
</blockquote>
<ul>
<li><font color = #ff3040>Vue中导入方法 需要用 import按需加载 才可以在 <code>setup()</code>里面使用该方法</font></li>
<li><code>watch()</code>监听 <code>ref</code>简单数据时候初始值不能为null 可以用<code>reactive()</code>来设置null</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/YGWyVm5riUNn83Q.png" alt="image-20210727121921553"></p>
<ul>
<li>定义计算属性：<ul>
<li><code>watch()</code>是函数方法，是用来定义侦听器的 监听数据是否被修改<ul>
<li><code>watch()</code>有两个参数 参数1是修改后的数据 参数2是修改前的数据</li>
</ul>
</li>
</ul>
</li>
<li>Vue中<code>watch()</code>里面的 四种方法和两种模式<ul>
<li>监听<code>ref()</code>定义的响应式数据 (监听简单数据)<ul>
<li>数组方法可以监听多个 <code>ref()</code>数据</li>
</ul>
</li>
<li>监听<code>reactive()</code>定义的响应式数据 (监听复杂对象数据)<ul>
<li>监听<code>reactive()</code>定义的响应式数据，某一个属性</li>
</ul>
</li>
<li>函数方式监听数据<ul>
<li>深度监听 <code>deep: true,</code></li>
<li>默认执行 <code>  immediate: true</code></li>
</ul>
</li>
</ul>
</li>
<li><font color =#ff3040>组件首次加载数据时，立刻触发一次  <code>immediate: true</code></font></li>
</ul>
<h3 id="watch-函数方式-监听数据-推荐"><a href="#watch-函数方式-监听数据-推荐" class="headerlink" title="watch()函数方式 监听数据 (推荐)"></a><strong><code>watch()</code>函数方式 监听数据 (推荐)</strong></h3><ul>
<li>函数方法监听数据 默认不支持深度监听 需要手动设置 <code>deep: true,</code></li>
<li>函数方式监听指定数据 有两个属性<ul>
<li>侦听对象中的子属性 <code>deep: true,</code></li>
<li>组件首次加载数据时，立刻触发一次  <code>immedate: true</code></li>
</ul>
</li>
</ul>
<blockquote>
<p>演示例子</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 监听的参数   </span></span><br><span class="line"><span class="keyword">const</span> obj = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">      <span class="attr">uname</span>: <span class="string">&#x27;lisi&#x27;</span>,</span><br><span class="line">      <span class="attr">friend</span>: &#123;</span><br><span class="line">        <span class="attr">info</span>: <span class="string">&#x27;hello&#x27;</span>,</span><br><span class="line">        <span class="attr">ages</span>: <span class="number">13</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)  </span><br><span class="line"><span class="comment">// 函数方式 监听数据  watch(() =&gt; 需要监控的数据, (新的值, 旧的值) =&gt; &#123; 进行的操作 &#125;)</span></span><br><span class="line">    <span class="title function_">watch</span>(<span class="function">() =&gt;</span> obj.<span class="property">friend</span>, <span class="function">(<span class="params">newD, oleD</span>) =&gt;</span> &#123; </span><br><span class="line">    <span class="comment">// 设置watch()监听简单数据</span></span><br><span class="line">    <span class="comment">// 参数1 是监听的修改后的数据</span></span><br><span class="line">    <span class="comment">// 参数2 是监听的修改前的数据</span></span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(newD)</span><br><span class="line">    &#125;,&#123;</span><br><span class="line">      <span class="comment">// 侦听对象中的子属性 (默认不知道是啥)</span></span><br><span class="line">      <span class="attr">deep</span>: <span class="literal">true</span>,</span><br><span class="line">      <span class="comment">// 组件首次加载数据时，立刻触发一次(默认false)</span></span><br><span class="line">      <span class="attr">immediate</span>: <span class="literal">true</span></span><br><span class="line">    &#125;) <span class="comment">// 组件首次加载数据时，立刻触发一次 (类似生命周期)</span></span><br></pre></td></tr></table></figure>

<h3 id="watch-监听ref-定义的简单数据"><a href="#watch-监听ref-定义的简单数据" class="headerlink" title="watch() 监听ref() 定义的简单数据"></a><strong><code>watch()</code> 监听<code>ref()</code> 定义的简单数据</strong></h3><ul>
<li>监听<code>ref()</code>定义的简单响应式数据<ul>
<li>适合监听里面的数据<code>ref()</code> 的简单数据</li>
</ul>
</li>
<li><code>watch(监听数据,(新数据参数,旧数据参数)=&gt;&#123; &#125;)</code></li>
<li>组件首次加载数据时，立刻触发一次  <code>immediate: true</code></li>
<li><code>watch()</code>监听 <code>ref</code>简单数据时候初始值不能为null 可以用<code>reactive()</code>来设置null</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/DRXYBMZxnaC4fzq.png" alt="image-20210727113315454"></p>
<blockquote>
<p>演示例子</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- 模板中不要求有唯一的根节点 --&gt;</span><br><span class="line">  &lt;div id=&quot;nav&quot;&gt;</span><br><span class="line">    &lt;div&gt;我的初始值&#123;&#123;rets&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;button @click=&quot;changeRet&quot;&gt;点我&lt;/button&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">// 导入子组件</span><br><span class="line">// 导入Vue3的组件</span><br><span class="line">import &#123; ref, watch &#125; from &#x27;vue&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  setup () &#123;</span><br><span class="line">    // 设置一个简单常量</span><br><span class="line">    const rets = ref(0)</span><br><span class="line">    // 设置一个自增函数方法 改变数据</span><br><span class="line">    const changeRet = () =&gt; &#123;</span><br><span class="line">    // 给数据点击一次 +1</span><br><span class="line">      rets.value += 1</span><br><span class="line">    &#125;</span><br><span class="line">    // 设置watch()监听简单数据</span><br><span class="line">    // 参数1 是监听的修改后的数据</span><br><span class="line">    // 参数2 是监听的修改前的数据</span><br><span class="line">    watch(rets, (newT,oleT) =&gt; &#123;</span><br><span class="line">      console.log(newT,oleT)</span><br><span class="line">    &#125;, &#123; immediate: true &#125;) // 组件首次加载数据时，立刻触发一次 (类似生命周期)</span><br><span class="line">    // 把数据return返回出去</span><br><span class="line">    return &#123; rets, changeRet &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="watch-监听ref-多个定义的简单数据"><a href="#watch-监听ref-多个定义的简单数据" class="headerlink" title="watch() 监听ref()多个定义的简单数据"></a><strong><code>watch()</code> 监听<code>ref()</code>多个定义的简单数据</strong></h3><ul>
<li>数组方式监听多个<code>ref()</code> 简单数据<ul>
<li>设置的数组中 只要有一个 <code>ref()</code> 设置的数据变化 就会监听到</li>
</ul>
</li>
<li>组件首次加载数据时，立刻触发一次  <code>immediate: true</code></li>
</ul>
<blockquote>
<p>演示例子</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- 模板中不要求有唯一的根节点 --&gt;</span><br><span class="line">  &lt;div id=&quot;nav&quot;&gt;</span><br><span class="line">    &lt;div&gt;&#123;&#123;rets&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;div&gt;&#123;&#123;retx&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;button @click=&quot;changeRet&quot;&gt;点我&lt;/button&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">// 导入子组件</span><br><span class="line">// 导入Vue3的组件</span><br><span class="line">import &#123; ref, watch &#125; from &#x27;vue&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  setup () &#123;</span><br><span class="line">    // 设置两个简单ref()数据</span><br><span class="line">    const rets = ref(&#x27;张三&#x27;)</span><br><span class="line">    const retx = ref(16)</span><br><span class="line">    // 设置一个方法 修改两个简单ref()的数据</span><br><span class="line">    const changeRet = () =&gt; &#123;</span><br><span class="line">      // 修改对象里面的数据</span><br><span class="line">      rets.value = &#x27;李四&#x27;</span><br><span class="line">      retx.value = 18</span><br><span class="line">    &#125;</span><br><span class="line">    // 设置watch()监听 使用数组的方法 监听ref()的数据</span><br><span class="line">    // 参数1 是监听的修改后的数据</span><br><span class="line">    // 参数2 是监听的修改前的数据</span><br><span class="line">    watch([retx, rets], (newT,oleT) =&gt; &#123;</span><br><span class="line">      // 监听所有的修改前 修改后的数据</span><br><span class="line">      console.log(newT,oleT)</span><br><span class="line">      // 监听指定的修改后的数据</span><br><span class="line">      console.log(oleT[0])</span><br><span class="line">      console.log(oleT[1])</span><br><span class="line">      // 监听指定的修改后的数据</span><br><span class="line">      console.log(newT[0])</span><br><span class="line">      console.log(newT[1])</span><br><span class="line">    &#125;, &#123; immediate: true &#125;) // 组件首次加载数据时，立刻触发一次 (类似生命周期)</span><br><span class="line">    // 把数据return返回出去</span><br><span class="line">    return &#123; rets, retx, changeRet &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="watch-监听reactive-定义的复杂对象"><a href="#watch-监听reactive-定义的复杂对象" class="headerlink" title="watch() 监听reactive() 定义的复杂对象"></a><strong><code>watch()</code> 监听<code>reactive()</code> 定义的复杂对象</strong></h3><ul>
<li>监听<code>reactive()</code>定义的复杂响应式所有数据(监听所有复杂对象数据)<ul>
<li>如果监听一整个对象 那么里面所有的值只要变化 就会检测到</li>
</ul>
</li>
<li>可以监听指定的数据对象中的数据</li>
<li>组件首次加载数据时，立刻触发一次  <code>immediate: true</code></li>
</ul>
<blockquote>
<p>演示例子</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- 模板中不要求有唯一的根节点 --&gt;</span><br><span class="line">  &lt;div id=&quot;nav&quot;&gt;</span><br><span class="line">    &lt;div&gt;我的初始值&#123;&#123;rets.age&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;button @click=&quot;changeRet&quot;&gt;点我&lt;/button&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">// 导入子组件</span><br><span class="line">// 导入Vue3的组件</span><br><span class="line">import &#123; reactive, watch &#125; from &#x27;vue&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  setup () &#123;</span><br><span class="line">    // 设置一个对象数据</span><br><span class="line">    const rets = reactive(&#123;</span><br><span class="line">      uname: &#x27;lisi&#x27;,</span><br><span class="line">      age: 12,</span><br><span class="line">      friend: &#123;</span><br><span class="line">        info: &#x27;hello&#x27;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">    // 设置一个修改对象数据的方法</span><br><span class="line">    const changeRet = () =&gt; &#123;</span><br><span class="line">      // 修改对象里面的数据</span><br><span class="line">      rets.age += 1</span><br><span class="line">    &#125;</span><br><span class="line">    // 设置watch()监听对象里面的数据</span><br><span class="line">    // 参数1 是监听的修改后的数据</span><br><span class="line">    // 参数2 是监听的修改前的数据</span><br><span class="line">    watch(rets, (newT,oleT) =&gt; &#123; // 可以rets.来监听指定的数据对象中的数据</span><br><span class="line">      console.log(newT,oleT)</span><br><span class="line">    &#125;, &#123; immediate: true &#125;) // 组件首次加载数据时，立刻触发一次 (类似生命周期)</span><br><span class="line">    // 把数据return返回出去</span><br><span class="line">    return &#123; rets, changeRet &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li>监听<code>reactive()</code>定义的复杂响应式的某条数据(监听一个)<ul>
<li>直接在 监听的两个参数后面设置监听的指定属性值即可</li>
</ul>
</li>
</ul>
<blockquote>
<p>演示例子</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">watch</span>(rets, <span class="function">(<span class="params">oleT, newT</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 监听对象里面的所有数据</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(newT,oleT)</span><br><span class="line">  <span class="comment">// 监听对象里面指定的数据</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(oleT.<span class="property">age</span>, newT.<span class="property">age</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ul>
<li>监听对象里的对象数据<ul>
<li>如果监听的对象里面 还有一层数据 可以一环套一环的监听</li>
</ul>
</li>
</ul>
<blockquote>
<p>演示例子</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- 模板中不要求有唯一的根节点 --&gt;</span><br><span class="line">  &lt;div id=&quot;nav&quot;&gt;</span><br><span class="line">    &lt;div&gt;我的初始值&#123;&#123;rets.friend.ages&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;button @click=&quot;changeRet&quot;&gt;点我&lt;/button&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">// 导入子组件</span><br><span class="line">// 导入Vue3的组件</span><br><span class="line">import &#123; reactive, watch &#125; from &#x27;vue&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  setup () &#123;</span><br><span class="line">    // 设置一个对象数据</span><br><span class="line">    const rets = reactive(&#123;</span><br><span class="line">      uname: &#x27;lisi&#x27;,</span><br><span class="line">      friend: &#123;</span><br><span class="line">        info: &#x27;hello&#x27;,</span><br><span class="line">        ages: 13</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">    // 设置一个修改对象数据的方法</span><br><span class="line">    const changeRet = () =&gt; &#123;</span><br><span class="line">      // 修改对象里面的数据</span><br><span class="line">      rets.friend.ages += 1</span><br><span class="line">    &#125;</span><br><span class="line">    // 设置watch()监听对象里面的数据</span><br><span class="line">    // 参数1 是监听的修改后的数据</span><br><span class="line">    // 参数2 是监听的修改前的数据</span><br><span class="line">    watch(rets.friend, (newT,oleT) =&gt; &#123;</span><br><span class="line">      console.log(newT,oleT)</span><br><span class="line">    &#125;, &#123; immediate: true &#125;) // 组件首次加载数据时，立刻触发一次 (类似生命周期)</span><br><span class="line">    // 把数据return返回出去</span><br><span class="line">    return &#123; rets, changeRet &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><strong>总结：</strong> 掌握watch的各种用法。</p>
<ol>
<li>侦听简单类型数据</li>
<li>侦听对象类型数据</li>
<li>侦听多个数据的变化</li>
<li>侦听某个属性的变化</li>
</ol>
<h2 id="组合API-ref-直接操作Dom节点"><a href="#组合API-ref-直接操作Dom节点" class="headerlink" title="组合API ref() 直接操作Dom节点"></a>组合API <code>ref()</code> 直接操作Dom节点</h2><blockquote>
<p>目标：掌握使用ref属性绑定DOM或组件</p>
</blockquote>
<p>获取DOM或者组件实例可以使用ref属性，写法和vue2.0需要区分开</p>
<ul>
<li><p><font color = #ff3040>ref操作单个DOM元素—-Vue3的规则</font></p>
<ul>
<li>操作Dom节点 需要设置一个变量实现绑定Dom节点</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> uname = <span class="title function_">ref</span>(<span class="literal">null</span>)</span><br></pre></td></tr></table></figure>

<ul>
<li>必须把 设置的变量 <code>return</code>出去</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">return</span> &#123;uname&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<blockquote>
<p>操作Dom节点例子</p>
</blockquote>
<ul>
<li>操作Dom节点 需要设置一个变量实现绑定Dom节点</li>
<li><font color =#ff3040>注意:如果你想操作dom 需要<code>.value</code>使用  必须把 设置的变量 <code>return</code>出去 </font></li>
<li>Vue2 操作Dom <code>this.$refs.example3.start();</code> </li>
<li>Vue3 操作Dom <code>example3.value.start()</code> 必须<code>.Value</code></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;!-- 3、在模板中绑定ref对象 --&gt;</span><br><span class="line">    用户名&lt;input type=&quot;text&quot; ref=&#x27;uname&#x27;&gt;</span><br><span class="line">    &lt;button @click=&#x27;handleClick&#x27;&gt;点击&lt;/button&gt;</span><br><span class="line">    &lt;hr&gt;</span><br><span class="line">    &lt;ul&gt;</span><br><span class="line">      &lt;!-- Vue3中不可以直接这样批量绑定ref --&gt;</span><br><span class="line">      &lt;li ref=&#x27;fruits&#x27; :key=&#x27;index&#x27; v-for=&#x27;(item, index) in list&#x27;&gt;&#123;&#123;item&#125;&#125;&lt;/li&gt;</span><br><span class="line">    &lt;/ul&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">import &#123; ref &#125; from &#x27;vue&#x27;</span><br><span class="line"></span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;App&#x27;,</span><br><span class="line">  setup () &#123;</span><br><span class="line">    // 1、创建一个引用对象 (获取</span><br><span class="line">    const uname = ref(null)</span><br><span class="line">    const handleClick = () =&gt; &#123;</span><br><span class="line">      // 获取DOM元素的方式 uname.value</span><br><span class="line">      console.log(uname.value)</span><br><span class="line">    &#125;</span><br><span class="line">    return &#123;</span><br><span class="line">      // 2、把ref对象提供给模板</span><br><span class="line">      uname,</span><br><span class="line">      handleClick</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style lang=&quot;less&quot;&gt;&lt;/style&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li><font color = #ff3040><code>:ref</code>操作 v-for循环遍历的Dom数据(多个Dom元素)</font><ul>
<li>Vue3多个操作多个ref需要动态绑定 <code>:ref</code></li>
<li>设置一个空数组 储存获取到的循环遍历里面的数据 然后再单独获取<ul>
<li>Vue3中批量绑定<code>:ref</code>需求提供一个方法 把获取到的多个ref数据储存起来</li>
<li><code>innerHTML</code>获取<code>:ref</code>标签里面的对应数据</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;!-- 0、在模板中绑定ref对象 --&gt;</span><br><span class="line">    用户名&lt;input type=&quot;text&quot; ref=&#x27;uname&#x27;&gt;</span><br><span class="line">    &lt;button @click=&#x27;handleClick&#x27;&gt;点击&lt;/button&gt;</span><br><span class="line">    &lt;hr&gt;</span><br><span class="line">    &lt;ul&gt;</span><br><span class="line">      &lt;!-- Vue3中绑定ref需要设置动态绑定 :ref --&gt;</span><br><span class="line">      &lt;li :ref=&#x27;setDom&#x27; :key=&#x27;index&#x27; v-for=&#x27;(item, index) in list&#x27;&gt;&#123;&#123;item&#125;&#125;&lt;/li&gt;</span><br><span class="line">    &lt;/ul&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">import &#123; ref, reactive, toRef &#125; from &#x27;vue&#x27;</span><br><span class="line"></span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;App&#x27;,</span><br><span class="line">  setup () &#123;</span><br><span class="line">    const obj = reactive(&#123;</span><br><span class="line">      // 1. 声明的数组数据</span><br><span class="line">      list: [&#x27;apple&#x27;, &#x27;orange&#x27;, &#x27;peach&#x27;]</span><br><span class="line">    &#125;)</span><br><span class="line">    const list = toRef(obj, &#x27;list&#x27;)</span><br><span class="line"></span><br><span class="line">    // 2. Vue3中批量绑定ref需求提供一个方法 把获取到的多个ref数据储存起来</span><br><span class="line">    const fruits = []</span><br><span class="line">    const setDom = (el) =&gt; &#123;</span><br><span class="line">      // 参数el是其中一个DOM元素(其中的一个数据)</span><br><span class="line">      // 3. 把多个ref获取的单独数据储存到数组里</span><br><span class="line">      fruits.push(el)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    // 4. 创建一个引用对象</span><br><span class="line">    const uname = ref(null)</span><br><span class="line">    const handleClick = () =&gt; &#123;</span><br><span class="line">      // 5. 获取DOM元素的方式 uname.value</span><br><span class="line">      // console.log(uname.value.value)</span><br><span class="line">      // innerHTML获取标签里面的数据(ipnut获取数据用的是value)</span><br><span class="line">      console.log(fruits[1].innerHTML)</span><br><span class="line">    &#125;</span><br><span class="line">    return &#123;</span><br><span class="line">      // 6、把ref对象提供给模板</span><br><span class="line">      uname,</span><br><span class="line">      list,</span><br><span class="line">      setDom,</span><br><span class="line">      handleClick</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style lang=&quot;less&quot;&gt;&lt;/style&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="组合API-父子传值"><a href="#组合API-父子传值" class="headerlink" title="组合API 父子传值"></a>组合API <code>父子传值</code></h2><blockquote>
<p>目标：掌握使用<code>props</code>选项和<code>emits</code>选项完成父子组件通讯</p>
</blockquote>
<ul>
<li><font color =#ff3040>导入组件 依旧需要   components: { }</font></li>
<li>子组件接收 <code>props</code> 父组件传来的值 需要设置 <code>toRef</code>或<code>toRefs</code> 把接收到的数据 变为响应式(不可以用<code>ref</code>)</li>
</ul>
<h3 id="父组件-传-子组件"><a href="#父组件-传-子组件" class="headerlink" title="父组件 传 子组件"></a><strong>父组件 传 子组件</strong></h3><ul>
<li>父组件给子组件传递数据 子组件用<code>props</code>接收</li>
</ul>
<blockquote>
<p>父组件传递数据</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;container&quot;&gt;</span><br><span class="line">    &lt;h1&gt;父组件&lt;/h1&gt;</span><br><span class="line">    &lt;p&gt;&#123;&#123;money&#125;&#125;&lt;/p&gt;</span><br><span class="line">    &lt;hr&gt;</span><br><span class="line">    &lt;Son :money=&quot;money&quot; /&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">import &#123; ref &#125; from &#x27;vue&#x27;</span><br><span class="line">import Son from &#x27;./Son.vue&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;App&#x27;,</span><br><span class="line">  components: &#123;</span><br><span class="line">    Son</span><br><span class="line">  &#125;,</span><br><span class="line">  // 父组件的数据传递给子组件</span><br><span class="line">  setup () &#123;</span><br><span class="line">    const money = ref(100)</span><br><span class="line">    return &#123; money &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<blockquote>
<p>子组件接收数据</p>
</blockquote>
<ul>
<li>子组件需要先用 <code>props</code>接收父组件传来的数据</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;container&quot;&gt;</span><br><span class="line">    &lt;h1&gt;子组件&lt;/h1&gt;</span><br><span class="line">    &lt;p&gt;&#123;&#123;money&#125;&#125;&lt;/p&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">import &#123; onMounted &#125; from &#x27;vue&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;Son&#x27;,</span><br><span class="line">  // 子组件接收父组件数据使用props即可</span><br><span class="line">  props: &#123;</span><br><span class="line">    money: &#123;</span><br><span class="line">      type: Number,</span><br><span class="line">        // 默认传递数据为0 </span><br><span class="line">      default: 0 // false</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">    // props 获取父组件的数据</span><br><span class="line">    // context 用来调用emit 触发自定义事件的函数(这里用于 子组件向父组件传值)</span><br><span class="line">  setup (props,context) &#123;</span><br><span class="line">    // 获取父组件数据money</span><br><span class="line">    console.log(props.money)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>总结：父组件向子组件传值，类型检测和Vue2相同，模板中访问<code>props</code>中的数据也是一样的</p>
<p>注意：js代码中得到父组件传递的值通过<code>setup()</code>函数的参数一<code>props</code>获取。</p>
<h3 id="子组件-传-父组件"><a href="#子组件-传-父组件" class="headerlink" title="子组件 传 父组件"></a><strong>子组件 传 父组件</strong></h3><ul>
<li>通过<code>setup()</code>函数的参数二<code>context</code>对象中<code>emit</code>方法触发子向父传值的事件。</li>
</ul>
<blockquote>
<p>子组件传递数据</p>
</blockquote>
<ul>
<li>通过<code>setup()</code>函数的参数二<code>context</code> 想父组件传递数据</li>
</ul>
<figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;container&quot;&gt;</span><br><span class="line">    &lt;h1&gt;子组件&lt;/h1&gt;</span><br><span class="line">    &lt;p&gt;&#123;&#123;money&#125;&#125;&lt;/p&gt;</span><br><span class="line"><span class="addition">+    &lt;button @click=&quot;changeMoney&quot;&gt;花50元&lt;/button&gt;</span></span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">import &#123; onMounted &#125; from &#x27;vue&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;Son&#x27;,</span><br><span class="line">  // 子组件接收父组件数据使用props即可</span><br><span class="line">  props: &#123;</span><br><span class="line">    money: &#123;</span><br><span class="line">      type: Number,</span><br><span class="line">      default: 0</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">    // props 获取父组件的数据</span><br><span class="line">    // context 用来调用emit 触发自定义事件的函数(这里用于 子组件向父组件传值)</span><br><span class="line"><span class="addition">+  setup (props, context) &#123;</span></span><br><span class="line">    // 获取父组件数据money</span><br><span class="line">    console.log(props.money)</span><br><span class="line">    // 向父组件传值</span><br><span class="line"><span class="addition">+    const changeMoney = () =&gt; &#123;</span></span><br><span class="line">      // 消费50元</span><br><span class="line">      // 通知父组件，money需要变成50</span><br><span class="line"><span class="addition">+      context.emit(&#x27;change-money&#x27;, 50)</span></span><br><span class="line"><span class="addition">+    &#125;</span></span><br><span class="line"><span class="addition">+    return &#123;changeMoney&#125;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<blockquote>
<p>父组件接收数据</p>
</blockquote>
<figure class="highlight diff"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;container&quot;&gt;</span><br><span class="line">    &lt;h1&gt;父组件&lt;/h1&gt;</span><br><span class="line">    &lt;p&gt;&#123;&#123;money&#125;&#125;&lt;/p&gt;</span><br><span class="line">    &lt;hr&gt;</span><br><span class="line"><span class="addition">+    &lt;Son :money=&quot;money&quot; @change-money=&quot;updateMoney&quot; /&gt;</span></span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">import &#123; ref &#125; from &#x27;vue&#x27;</span><br><span class="line">import Son from &#x27;./Son.vue&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;App&#x27;,</span><br><span class="line">  components: &#123;</span><br><span class="line">    Son</span><br><span class="line">  &#125;,</span><br><span class="line">  // 父组件的数据传递给子组件</span><br><span class="line">  setup () &#123;</span><br><span class="line">    const money = ref(100)</span><br><span class="line"><span class="addition">+    const updateMoney = (newMoney) =&gt; &#123;</span></span><br><span class="line"><span class="addition">+      money.value = newMoney</span></span><br><span class="line"><span class="addition">+    &#125;</span></span><br><span class="line"><span class="addition">+    return &#123; money , updateMoney&#125;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>总结：通过setup函数的参数二context对象中emit方法触发子向父传值的事件。</p>
<h2 id="语法糖-v-model-父子组件之前相互传值"><a href="#语法糖-v-model-父子组件之前相互传值" class="headerlink" title="语法糖 v-model: 父子组件之前相互传值"></a>语法糖 <code>v-model:</code> 父子组件之前相互传值</h2><blockquote>
<p>目标：掌握vue3.0的v-model语法糖原理</p>
</blockquote>
<ul>
<li>在Vue3中 <code>v-model:</code>的用法 类似于Vue2中的<code>.sync</code>方法 父组件 子组件双向绑定数据 省去 <code>@</code></li>
<li>在vue3中<code>v-model:</code>语法糖的拆分：<code>&lt;Son :modelValue=&quot;msg&quot; @update:modelValue=&quot;msg=$event&quot; /&gt;</code><ul>
<li><font color =#4ac18b> <code>v-model:</code> 有默认值 <code>modelValue</code> 默认值绑定的话 不需要设置名称 但是子组件传值的时候需要写  <code>&#39;update:modelValue&#39;</code>  </font><ul>
<li><font color =#ff3040>默认导出的时候 不需要用<code>props</code>接收</font></li>
</ul>
</li>
<li><code>v-model</code> 命名传值 子组组件传值的时候需要写<code>update:命名</code><ul>
<li><font color =#ff3040>命名导出的时候 需要用<code>props</code>接收</font></li>
</ul>
</li>
</ul>
</li>
<li>子组件接收 <code>props</code> 父组件传来的值 需要设置 <code>toRef</code>或<code>toRefs</code> 把接收到的数据 变为响应式(不可以用<code>ref</code>)</li>
</ul>
<p><font color =#ff3040>Vue2的.sync修饰符双向绑定：</font></p>
<ul>
<li>在vue2.x的时候 <code>.sync</code>  除去v-model实现双向数据绑定的另一种方式</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- &lt;Son :money=&#x27;money&#x27; @update:money=&quot;fn&quot;  /&gt; --&gt;</span><br><span class="line">&lt;Son :money.sync=&#x27;money&#x27;  /&gt;</span><br></pre></td></tr></table></figure>

<p><font color =#ff3040>Vue3的v-model双向绑定:</font></p>
<ul>
<li>在vue3.0的时候，使用 <code>v-model:money=&quot;money&quot;</code>  即可代替Vue2的 <code>.sync</code></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- &lt;Son :money=&quot;money&quot; @update:money=&quot;updateMoney&quot; /&gt; --&gt;&lt;Son v-model:money=&quot;money&quot; /&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>v-model 默认名称传值</p>
</blockquote>
<ul>
<li>使用<code>v-model</code>默认名称 进行父子组传值<ul>
<li>父组件向子组传递数据 并且是默认名称进行传值 <code>v-model</code></li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"> &lt;!-- 弹窗的组件 state.<span class="property">showDialog</span>是要传的值 --&gt;</span><br><span class="line"> <span class="language-xml"><span class="tag">&lt;<span class="name">checkProject</span> <span class="attr">v-model</span>=<span class="string">&quot;state.showDialog&quot;</span> /&gt;</span></span></span><br><span class="line"> <span class="comment">// 状态位</span></span><br><span class="line"> <span class="keyword">const</span> state = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">   <span class="comment">// 详情页弹窗</span></span><br><span class="line">   <span class="attr">showDialog</span>: <span class="literal">false</span></span><br><span class="line"> &#125;)</span><br><span class="line"><span class="keyword">return</span> &#123; state &#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>子组件 接收父组件传来的值 使用 <code>update</code>进行双向绑定<ul>
<li>父组件通过<code>v-model</code>默认名称进行父子传值 所以需要设置<code>update:modelValue</code> 来向父组件传递数据</li>
<li>父组件通过<code>v-model</code>默认名称进行父子传值 所有接收数据 也要通过<code>&#39;modelValue&#39;</code>来获取父组件传来的数据</li>
<li>子组件接收 <code>props</code> 父组件传来的值 需要设置 <code>toRef</code>或<code>toRefs</code> 把接收到的数据 变为响应式(不可以用<code>ref</code>)</li>
<li><font color =#ff3040>默认导出的时候 不需要用<code>props</code>接收</font></li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;el-dialog v-model=&quot;data.showDialog&quot; title=&quot;提示&quot;&gt;</span><br><span class="line">    &lt;span&gt;这是一段信息&lt;/span&gt;</span><br><span class="line">    &lt;!-- Vue3插槽 --&gt;</span><br><span class="line">    &lt;template #footer&gt;</span><br><span class="line">      &lt;el-button type=&quot;primary&quot; @click=&quot;handleClose&quot;&gt;关 闭&lt;/el-button&gt;</span><br><span class="line">    &lt;/template&gt;</span><br><span class="line">  &lt;/el-dialog&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">import &#123; reactive &#125; from &#x27;vue&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;CheckProject&#x27;,</span><br><span class="line">  setup (props, context) &#123;</span><br><span class="line">    // 储存接收的值</span><br><span class="line">    const data = reactive(&#123;</span><br><span class="line">      showDialog: props.showDialog</span><br><span class="line">    &#125;)</span><br><span class="line">    // 关闭弹窗方法</span><br><span class="line">    const handleClose = () =&gt; &#123;</span><br><span class="line">      // 关闭弹窗 默认传值 update:modelValue</span><br><span class="line">      context.emit(&#x27;update:modelValue&#x27;, false)</span><br><span class="line">    &#125;</span><br><span class="line">    return &#123; handleClose, data &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>v-model 命名传值</p>
</blockquote>
<ul>
<li>使用<code>v-model</code>命名 进行父子组传值<ul>
<li>父组件向子组传递数据 并且是命名进行传值 <code>v-model:名称</code></li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt; </span><br><span class="line">&lt;div&gt;   </span><br><span class="line">    父组件设置的值 &#123;&#123;ret&#125;&#125; &#123;&#123;rets&#125;&#125; </span><br><span class="line">    &lt;hr&gt;    </span><br><span class="line">    &lt;!-- 给子组件传递数据 --&gt;  </span><br><span class="line">    &lt;!-- v-model可以双向绑定父组件子组件 类似于 .sync --&gt;  </span><br><span class="line">    &lt;son v-model:ret=&#x27;ret&#x27; v-model:rets=&#x27;rets&#x27;&gt;</span><br><span class="line">    &lt;/son&gt;  </span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    import &#123; ref &#125; from &#x27;@vue/reactivity&#x27;    // 引入子组件</span><br><span class="line">    import son from &#x27;./views/model/son.vue&#x27;</span><br><span class="line">    export default &#123;  </span><br><span class="line">        components: &#123;   </span><br><span class="line">            // 导入子组件   </span><br><span class="line">            son  </span><br><span class="line">        &#125;, </span><br><span class="line">        setup () &#123;  </span><br><span class="line">            // 设置传递子组件的数据   </span><br><span class="line">            const ret = ref(123)   </span><br><span class="line">            const rets = ref(&#x27;你好&#x27;)</span><br><span class="line">            return &#123; ret, rets &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>子组件 接收父组件传来的值 使用 <code>update</code>进行双向绑定<ul>
<li>子组件接收 <code>props</code> 父组件传来的值 需要设置 <code>toRef</code>或<code>toRefs</code> 把接收到的数据 变为响应式(不可以用<code>ref</code>)</li>
<li><font color =#ff3040>命名导出的时候 需要用<code>props</code>接收</font></li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    子组件内容 &#123;&#123;ret&#125;&#125;</span><br><span class="line">    &lt;button @click=&quot;changeRet&quot;&gt;点击改变&lt;/button&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  props: &#123;</span><br><span class="line">    // 接收父组件传来的数据</span><br><span class="line">    ret: &#123;</span><br><span class="line">      require: false</span><br><span class="line">    &#125;,</span><br><span class="line">    rets: &#123;</span><br><span class="line">      require: false</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  setup (props, context) &#123;</span><br><span class="line">    const changeRet = () =&gt; &#123;</span><br><span class="line">      // 向父组件传值 修改父组件的数据 update双向绑定</span><br><span class="line">      context.emit(&#x27;update:ret&#x27;, 100)</span><br><span class="line">      context.emit(&#x27;update:rets&#x27;, &#x27;大家好&#x27;)</span><br><span class="line">    &#125;</span><br><span class="line">    return &#123; changeRet &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><strong>总结：</strong> </p>
<ol>
<li><p>vue3.0封装组件支持v-model的时候，父传子<code>:modelValue</code> 子传父 <code>@update:modelValue</code></p>
</li>
<li><p>Vue3中的v-model的新的用法可以替代Vue2中的sync修饰符</p>
</li>
<li><p>v-model双向绑定组件属性的规则： </p>
<ol>
<li>父组件的绑定  v-mode:属性名称&#x3D;‘数据名称’</li>
<li>子组件触发更新的动作： context.emit(‘update:属性名称’, 要更新的数据)</li>
</ol>
</li>
</ol>
<h2 id="组合API-provide-inject-依赖注入-相互传值类似Vuex"><a href="#组合API-provide-inject-依赖注入-相互传值类似Vuex" class="headerlink" title="组合API provide inject 依赖注入(相互传值类似Vuex)"></a>组合API <code>provide</code> <code>inject</code> 依赖注入(相互传值类似Vuex)</h2><blockquote>
<p>目标：掌握使用provide函数和inject函数完成后代组件数据通讯</p>
<p>使用场景：有一个父组件，里头有子组件，有孙组件，有很多后代组件，共享父组件数据。</p>
</blockquote>
<ul>
<li><font color =#ff3040>注意: 依赖注入的数据 需要用 <code>.value</code> 来读取数据</font></li>
<li>依赖注入 类似以Vuex 可以父组件可以直接向其他组件传递数据 直接可以接收父组件传递的数据</li>
</ul>
<blockquote>
<p>原组件设置方法 进行传递</p>
</blockquote>
<ul>
<li>父组件可以直接把数据传递给 子组件 孙组件 无需父传子方法传递数据(类似Vuex)<ul>
<li>可以传递数据 和 函数方法</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    传递给其他组件的数据 &#123;&#123;ret&#125;&#125;</span><br><span class="line">    &lt;sunzi&gt;&lt;/sunzi&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">// 导入Vue3的方法</span><br><span class="line">import sunzi from &#x27;@/views/model/sunzi&#x27;</span><br><span class="line">import &#123; ref &#125; from &#x27;@vue/reactivity&#x27;</span><br><span class="line">import &#123; provide &#125; from &#x27;@vue/runtime-core&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  components: &#123;</span><br><span class="line">    // 加载其他组件</span><br><span class="line">    sunzi</span><br><span class="line">  &#125;,</span><br><span class="line">  setup () &#123;</span><br><span class="line">    // 设置要传递的数据</span><br><span class="line">    const ret = ref(123)</span><br><span class="line">    // 设置要传递的方法</span><br><span class="line">    const getRet = (removeRet) =&gt; &#123;</span><br><span class="line">      ret.value = ret.value - removeRet</span><br><span class="line">    &#125;</span><br><span class="line">    // 传递数据给其他组件</span><br><span class="line">    provide(&#x27;ret&#x27;, ret)</span><br><span class="line">    // 传递方法给其他组件</span><br><span class="line">    provide(&#x27;getRet&#x27;, getRet)</span><br><span class="line">    // 返回数据</span><br><span class="line">    return &#123; getRet, ret &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<blockquote>
<p>子组件接收原组件传来的数据</p>
</blockquote>
<ul>
<li>接收原组件传来的数据和方法<ul>
<li>通过原组件传来的方法 修改原组件的数据</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    接收传来的值 并且修改&#123;&#123;ret&#125;&#125;</span><br><span class="line">    &lt;button @click=&quot;remove&quot;&gt;减少20&lt;/button&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">import &#123; inject &#125; from &#x27;@vue/runtime-core&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  setup () &#123;</span><br><span class="line">    // 接收传递的数据</span><br><span class="line">    const ret = inject(&#x27;ret&#x27;)</span><br><span class="line">    // 接收传递的方法</span><br><span class="line">    const getRet = inject(&#x27;getRet&#x27;)</span><br><span class="line">    const remove = () =&gt; &#123;</span><br><span class="line">      // 给接收的方法 设置子组件数据 并传回原组件进行修改</span><br><span class="line">      getRet(20)</span><br><span class="line">    &#125;</span><br><span class="line">    return &#123; ret, remove &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>总结：</strong>  </p>
<ol>
<li><code>provide</code>函数提供数据和函数给后代组件使用<ul>
<li>提供的函数方法可以用来 计算传递过去的原数据 进行原数据修改</li>
</ul>
</li>
<li><code>inject</code>函数给当前组件注入<code>provide</code>提供的数据和函数</li>
</ol>
<p>注意：传递数据的目的是从上向下传递数据；传递函数的目的是为了从下向上传递数据。</p>
<h2 id="创建Vue3的-全局实例化"><a href="#创建Vue3的-全局实例化" class="headerlink" title="创建Vue3的 全局实例化"></a>创建Vue3的 <code>全局实例化</code></h2><ul>
<li>Vue3脚手架换进下 在 <code>main.js</code>文件夹里面 设置全局方法<ul>
<li><code>createApp(App)</code> 是Vue3的全局方法实例</li>
</ul>
</li>
<li>Vue3的全局 api方法官方示例 <a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/api/#%E5%85%A8%E5%B1%80-API">官方Vue全局方法</a><ul>
<li>Vue2的全局方法 Vue3也可以用 但是需要从<code>createApp(App)</code> 调用</li>
</ul>
</li>
<li>全局实例化 通常被用于实例化 插件 和 自定义方法</li>
</ul>
<blockquote>
<p>main.js 设置全局方法</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 这种导入api的方法可以减少打包后的体积(按需导入)</span></span><br><span class="line"><span class="keyword">import</span> &#123; createApp &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">&#x27;./router&#x27;</span></span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 设置Vue3的全局方法实例</span></span><br><span class="line"><span class="comment">// 代替了Vue2的 Vue.的全局方法</span></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">createApp</span>(<span class="title class_">App</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 全局过滤器方法</span></span><br><span class="line">app.<span class="title function_">filter</span>(&#123;&#125;)</span><br><span class="line"><span class="comment">// 全局混入mixin(Vue3 只推荐全局)</span></span><br><span class="line">app.<span class="title function_">mixin</span>(&#123;&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// Vue3的挂载实例化对象的方法 .use()方法用于配置插件</span></span><br><span class="line">app.<span class="title function_">use</span>(store).<span class="title function_">use</span>(router).<span class="title function_">mount</span>(<span class="string">&#x27;#app&#x27;</span>)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="Vue3自定义插件机制-install"><a href="#Vue3自定义插件机制-install" class="headerlink" title="Vue3自定义插件机制 install"></a>Vue3自定义插件机制 <code>install</code></h2><p><a target="_blank" rel="noopener" href="https://v3.cn.vuejs.org/guide/plugins.html#%E6%8F%92%E4%BB%B6">Vue3插件机制官网</a></p>
<blockquote>
<p>目标：熟悉Vue的插件机制（针对Vue核心规则的一种扩展机制）</p>
</blockquote>
<ul>
<li>Vue3配置全局插件是 app. (Vue2是 Vue.)</li>
<li>Vue3设置插件的时候 设置插件的Vue组件需要 设置<code>name</code>属性</li>
</ul>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/kaSbDBwVJC32TEh.png" alt="image-20210722165649300"></p>
<h3 id="设置Vue3自定义插件-install"><a href="#设置Vue3自定义插件-install" class="headerlink" title="设置Vue3自定义插件 install"></a><strong>设置Vue3自定义插件 <code>install</code></strong></h3><p><a target="_blank" rel="noopener" href="https://v3.cn.vuejs.org/guide/plugins.html#%E6%8F%92%E4%BB%B6">Vue3插件机制官网</a></p>
<blockquote>
<p>第一步 把写好的Vue组件 设置为插件</p>
</blockquote>
<ul>
<li><p>把写好的Vue组件 在一个文件中 统一设置为插件</p>
</li>
<li><p>设置插件的Vue组件需要 设置<code>name</code>属性</p>
<ul>
<li><code>app.component</code> 设置插件的名称 需要和 组件内部设置的name名称一致</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入需要设置为插件的Vue组件</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">XtxSkeleton</span> <span class="keyword">from</span> <span class="string">&#x27;./xtx-skeleton.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 自定义一个插件导出</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  install (app) &#123;</span><br><span class="line">    <span class="comment">// 配置全局插件 app.component 设置插件的名称 需要和 组件内部设置的name名称一致</span></span><br><span class="line">    <span class="comment">// app表示Vue全局插件的实例对象 (Vue2是Vue. Vue3是app.)</span></span><br><span class="line">  app.<span class="title function_">component</span>(<span class="title class_">XtxSkeleton</span>.<span class="property">name</span>, <span class="title class_">XtxSkeleton</span>) <span class="comment">// (导入组件的名称的name名.name,插件的名称)</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>第二步 实例化插件 让其能在Vue组件中使用</p>
</blockquote>
<ul>
<li>入口文件一般是 <code>main.js</code></li>
<li>通过 <code>.use(插件名称)</code> 实例化该插件</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入实例化的Vue3</span></span><br><span class="line"><span class="keyword">import</span> &#123; createApp &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="comment">// 导入自定义插件的配置文件 让其实例化 可在组件内使用</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">XtxUI</span> <span class="keyword">from</span> <span class="string">&#x27;./components/library/index&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 在createApp(App)后面 .use()导入自定义的插件</span></span><br><span class="line"><span class="title function_">createApp</span>(<span class="title class_">App</span>).<span class="title function_">use</span>(<span class="title class_">XtxUI</span>).<span class="title function_">mount</span>(<span class="string">&#x27;#app&#x27;</span>)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<blockquote>
<p>第三步 实例化插件后 无需导入 直接在Vue组件中使用</p>
</blockquote>
<ul>
<li>无需导入 直接在<code>template</code> 模板中调用插件即可(导入配置的插件名称)</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;home-banner&quot;&gt;</span><br><span class="line">  &lt;!-- 直接导入插件即可 可以在里面绑定参数 --&gt;</span><br><span class="line"> &lt;XtxSkeleton /&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<p>注意: </p>
<p>​    如果需要给插件传递参数 通常会动态绑定数据<code>:</code> ( 动态绑定基本类型的传入插件的数据 可保证插件需求的数据类型)</p>
<h3 id="批量导入Vue插件方法"><a href="#批量导入Vue插件方法" class="headerlink" title="批量导入Vue插件方法"></a><strong>批量导入Vue插件方法</strong></h3><p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/QCNwM1VujSiFLZs.png" alt="image-20210725010517653"></p>
<ul>
<li>适用于 所有插件都集合在一个文件夹 (index.js里面)</li>
<li>通过<code>require</code>方法筛选插件 然后<code>importFn</code>进行批量导入插件方法 然后批量<code>component</code>实例化Vue插件</li>
<li>无需<code>import</code>导入</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// -------------------------------------- 批量导入Vue插件</span></span><br><span class="line"><span class="comment">// 参数一：从哪个目录中读取文件</span></span><br><span class="line"><span class="comment">// 参数二：是否读取子目录中的文件：true读取子目录，false不读取子目录</span></span><br><span class="line"><span class="comment">// 参数三：读取文件的匹配规则</span></span><br><span class="line"><span class="keyword">const</span> importFn = <span class="built_in">require</span>.<span class="title function_">context</span>(<span class="string">&#x27;./&#x27;</span>, <span class="literal">false</span>, <span class="regexp">/\.vue$/</span>)</span><br><span class="line"><span class="comment">// 自定义一个插件方法导出</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  install (app) &#123;</span><br><span class="line">    <span class="comment">// 批量注册 -------------------------------------------------------------------</span></span><br><span class="line">    <span class="comment">// 自动化批量注册全局组件</span></span><br><span class="line">    importFn.<span class="title function_">keys</span>().<span class="title function_">forEach</span>(<span class="function"><span class="params">componentPath</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="comment">// componentPath表示其中一个组件的路径</span></span><br><span class="line">      <span class="comment">// 根据路径导入组件</span></span><br><span class="line">      <span class="comment">// 返回值component表示组件的实例对象</span></span><br><span class="line">      <span class="keyword">const</span> component = <span class="title function_">importFn</span>(componentPath).<span class="property">default</span></span><br><span class="line">      <span class="comment">// 注册全局组局</span></span><br><span class="line">      app.<span class="title function_">component</span>(component.<span class="property">name</span>, component)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h2 id="Vue3的-mixin混入"><a href="#Vue3的-mixin混入" class="headerlink" title="Vue3的 mixin混入"></a>Vue3的 <code>mixin</code>混入</h2><blockquote>
<p><strong>总结：</strong> 在vue2.0中一些可复用的逻辑可以使用mixin来封装，防止相同逻辑的代码在组件中存在冗余。vue3.0的组合API很好的解决了这个问题，就不在推荐使用mixin了。</p>
<p>注意：实际上组合API的模式替代了mixin的应用场景。</p>
</blockquote>
<ul>
<li><p>mixin 全局混入的特性是 所有的其他组件都可以使用</p>
</li>
<li><p>Vue3 如果想在生命周期中触发全局混入 不能用Vue3的声明周期 需要写Vue2的 <code>created()</code>声明周期中</p>
</li>
<li><p>Vue3中有组合api 不推荐使用 局部混入 全局混入可以使用</p>
</li>
</ul>
<blockquote>
<p>全局混入例子</p>
</blockquote>
<ul>
<li>脚手架环境下 <code>main.js</code>文件 设置全局混入</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// main.js设置全局混入</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 这种导入api的方法可以减少打包后的体积(按需导入)</span></span><br><span class="line"><span class="keyword">import</span> &#123; createApp &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">&#x27;./router&#x27;</span></span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 设置Vue3的全局方法实例</span></span><br><span class="line"><span class="comment">// 代替了 Vue2的 Vue.的全局方法</span></span><br><span class="line"><span class="keyword">const</span> app = <span class="title function_">createApp</span>(<span class="title class_">App</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 设置全局混入mixin</span></span><br><span class="line">app.<span class="title function_">mixin</span>(&#123;</span><br><span class="line">    <span class="comment">// 设置全局混入的methods方法</span></span><br><span class="line">  <span class="attr">methods</span>: &#123;</span><br><span class="line">    sayHello () &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;你好&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// Vue3的挂载实例化对象的方法 .use()方法用于配置插件</span></span><br><span class="line">app.<span class="title function_">use</span>(store).<span class="title function_">use</span>(router).<span class="title function_">mount</span>(<span class="string">&#x27;#app&#x27;</span>)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li>Vue文件中 导入全局混入方法</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;!-- 直接给点击事件绑定混入 点击后触发混入 --&gt;</span><br><span class="line">    &lt;button @click=&quot;sayHello&quot;&gt;全局混入按钮&lt;/button&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  // Vue3 在声明周期中导入混入方法 (不要用Vue3的声明周期方法)</span><br><span class="line">  created () &#123;</span><br><span class="line">    this.sayHello()</span><br><span class="line">  &#125;,</span><br><span class="line">  setup () &#123;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><strong>总结：</strong> 在vue2.0中一些可复用的逻辑可以使用mixins来封装，防止相同逻辑的代码在组件中存在冗余。但是vue3.0的组合API很好的解决了这个问题，就不在推荐使用mixins了。</p>
<p>注意：实际上组合API的模式替代了mixin的应用场景。</p>
<h2 id="Vue3-promise-掉接口方法"><a href="#Vue3-promise-掉接口方法" class="headerlink" title="Vue3 promise 掉接口方法"></a>Vue3 <code>promise</code> 掉接口方法</h2><ul>
<li>Vue3 <code>promise</code>的掉接口 赋值方法( 获取服务器的数据)</li>
</ul>
<blockquote>
<p><code>promise</code> 掉接口方法 (不传参)</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line"><span class="comment">// 导入Vue3 ref方法</span></span><br><span class="line"><span class="keyword">import</span> &#123; ref &#125; <span class="keyword">from</span> <span class="string">&#x27;vue-demi&#x27;</span></span><br><span class="line"><span class="comment">// 导入获取数据的接口api</span></span><br><span class="line"><span class="keyword">import</span> &#123; findBanner &#125; <span class="keyword">from</span> <span class="string">&#x27;../../../api/home&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;HomeBanner&#x27;</span>,</span><br><span class="line">  setup () &#123;</span><br><span class="line">    <span class="comment">// 创建一个ref响应式 接收服务器的数据 (ref可以存数组)</span></span><br><span class="line">    <span class="keyword">const</span> slides = <span class="title function_">ref</span>([])</span><br><span class="line">    <span class="comment">// 储存获取到的服务器数据</span></span><br><span class="line">    <span class="title function_">findBanner</span>().<span class="title function_">then</span>(<span class="function"><span class="params">ret</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// 如果获取成功 把服务器的数据 储存起来</span></span><br><span class="line">      slides.<span class="property">value</span> = ret.<span class="property">result</span></span><br><span class="line">    &#125;).<span class="title function_">catch</span>(<span class="function">(<span class="params">err</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// 如果获取失败 打印错误</span></span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(err)</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">return</span> &#123; slides &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>promise</code> 掉接口方法 (传参)</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// promise 掉接口方法 (传参)</span></span><br><span class="line"><span class="title function_">findBanner</span>(<span class="attr">id</span>:<span class="number">10</span>).<span class="title function_">then</span>(<span class="function"><span class="params">ret</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// 如果获取成功 把服务器的数据 储存起来</span></span><br><span class="line">      slides.<span class="property">value</span> = ret.<span class="property">result</span></span><br><span class="line">    &#125;).<span class="title function_">catch</span>(<span class="function">(<span class="params">err</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// 如果获取失败 打印错误</span></span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(err)</span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="keyword">return</span> &#123; slides &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>总结: </p>
<ol>
<li>基于<code>promise</code>方式 获取服务器的数据</li>
</ol>
<h2 id="Vue3-v-slot-插槽设置"><a href="#Vue3-v-slot-插槽设置" class="headerlink" title="Vue3 v-slot 插槽设置"></a>Vue3 <code>v-slot</code> 插槽设置</h2><ul>
<li>插槽，我们想象一下电脑的主板，主板上面有很多插槽，而每个插槽可能对应了不同的配置，那么在vue中，也可以这么来理解，各个插槽有各个插槽的功能，它们相互独立，可用于组件之间通信。</li>
<li>Vue3中也支持 <code>v-slot</code> 并且支持其简写 <code>#</code><ul>
<li><code>v-slot</code> 和 <code>#</code> 是具名插槽<ul>
<li>具名插槽 导入的时候 需要 <code>&lt;slot name=&quot;具名插槽名称&quot; /&gt;</code></li>
</ul>
</li>
<li><code>&lt;slot /&gt;</code> 是默认插槽 <ul>
<li>默认插槽 导入的时候 直接<code>&lt;slot /&gt;</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<p><font color =#ff3040>在同一组件中 设置了一部分具名插槽 剩下的部分会自动为默认插槽</font></p>
<blockquote>
<p>插槽例子</p>
</blockquote>
<ul>
<li>设置作用域插槽 (具名 和 默认)</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;home-new&quot;&gt;</span><br><span class="line">    &lt;HomePanel title=&quot;新鲜好物&quot; sub-title=&quot;新鲜出炉 品质靠谱&quot;&gt;</span><br><span class="line">      &lt;!-- 具名插槽的数据 --&gt;</span><br><span class="line">      &lt;template #right&gt;</span><br><span class="line">        &lt;XtxMore path=&quot;/&quot; /&gt;</span><br><span class="line">      &lt;/template&gt;</span><br><span class="line">      &lt;!-- 默认插槽的数据 --&gt;</span><br><span class="line">      &lt;ul class=&quot;goods-list&quot;&gt;</span><br><span class="line">        &lt;li v-for=&quot;item in goods&quot; :key=&quot;item.id&quot;&gt;</span><br><span class="line">          &lt;RouterLink :to=&quot;`/product/$&#123;item.id&#125;`&quot;&gt;</span><br><span class="line">            &lt;img :src=&quot;item.picture&quot; alt=&quot;&quot;&gt;</span><br><span class="line">            &lt;p class=&quot;name ellipsis&quot;&gt;&#123;&#123;item.name&#125;&#125;&lt;/p&gt;</span><br><span class="line">            &lt;p class=&quot;price&quot;&gt;&amp;yen;&#123;&#123;item.price&#125;&#125;&lt;/p&gt;</span><br><span class="line">          &lt;/RouterLink&gt;</span><br><span class="line">        &lt;/li&gt;</span><br><span class="line">      &lt;/ul&gt;</span><br><span class="line">    &lt;/HomePanel&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">import &#123; ref &#125; from &#x27;vue&#x27;</span><br><span class="line">// 导入调用插槽的模板</span><br><span class="line">import HomePanel from &#x27;./home-pannel.vue&#x27;</span><br><span class="line">import &#123; findNew &#125; from &#x27;@/api/home&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;HomeNew&#x27;,</span><br><span class="line">  // 使用导入的插槽模板</span><br><span class="line">  components: &#123; HomePanel &#125;,</span><br><span class="line">  setup () &#123;</span><br><span class="line">    const goods = ref([])</span><br><span class="line">    findNew().then(data =&gt; &#123;</span><br><span class="line">      goods.value = data.result</span><br><span class="line">    &#125;)</span><br><span class="line">    return &#123; goods &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>在插槽组件中 导入具名插槽和默认插槽 进行数据加工</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;!-- 好物推荐的整体 --&gt;</span><br><span class="line">  &lt;div class=&quot;home-panel&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;container&quot;&gt;</span><br><span class="line">      &lt;div class=&quot;head&quot;&gt;</span><br><span class="line">        &lt;h3&gt;&#123;&#123; title &#125;&#125;&lt;small&gt;&#123;&#123; subTitle &#125;&#125;&lt;/small&gt;&lt;/h3&gt;</span><br><span class="line">        &lt;!-- 具名插槽：用于填充右侧内容(好物推荐整体上面右侧的查看全部)--&gt;</span><br><span class="line">        &lt;slot name=&quot;right&quot; /&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">      &lt;!-- 默认插槽: (好物推荐整体下面商品内容) --&gt;</span><br><span class="line">      &lt;slot /&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<h2 id="Vue3-的动画过度-Transition"><a href="#Vue3-的动画过度-Transition" class="headerlink" title="Vue3 的动画过度 Transition"></a>Vue3 的动画过度 <code>Transition</code></h2><p><a target="_blank" rel="noopener" href="https://v3.cn.vuejs.org/api/built-in-components.html#transition">Vue的动画介绍</a></p>
<blockquote>
<p><strong>目标：</strong> 知道vue中如何使用动画，知道Transition组件使用。</p>
</blockquote>
<p><img src="https://jinyanlong-1305883696.cos.ap-hongkong.myqcloud.com/iqIeRO7NyjCQD1m.png" alt="1616576876892"></p>
<ul>
<li>Vue提供的一个标签 <code> &lt;Transition name=&quot;类名&quot;&gt;&lt;/Transition&gt;</code> 把需要动画效果的内容 包住 让其拥有动画效果</li>
<li>name 提供的样式绑定类名 需要绑定css样式 才能生效动画效果( 推荐绑定到全局样式 设置过度效果显示隐藏 )</li>
<li>Vue动画有六个类(都需要设置)<ul>
<li>离开前 离开后</li>
<li>显示前 显示后</li>
<li>动画前 动画后</li>
</ul>
</li>
<li>多个transition使用不同动画，修改name属性即可。</li>
<li>动画过度会被缓存 相同的组件 只会执行一次动画 需要动态绑定 <code>:key</code> 让其变为不同组件</li>
</ul>
<blockquote>
<p>使用案例</p>
</blockquote>
<ul>
<li>Vue模板绑定 <code> &lt;Transition name=&quot;类名&quot;&gt;&lt;/Transition&gt;</code> 设置动画</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;!-- 绑定动画模板 name是样式绑定类 --&gt;</span><br><span class="line">      &lt;Transition name=&quot;fade&quot;&gt;</span><br><span class="line">        &lt;!-- 这里填充需要动画的内容 --&gt;</span><br><span class="line">        &lt;div&gt;</span><br><span class="line">            过度动画的效果</span><br><span class="line">    	&lt;/div&gt;</span><br><span class="line">      &lt;/Transition&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>css 动画效果设置 <ul>
<li>可以写在 style 但是推荐写在全局样式文件中 全局设置</li>
<li>中间过度细节 可以只设置 进入的时候</li>
</ul>
</li>
</ul>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 这里是Vue的过度动画效果(name名是fade)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//开始时候的效果(默认是 opacity: 1;)</span></span><br><span class="line"><span class="selector-class">.fade-enter-to</span>,</span><br><span class="line"><span class="selector-class">.fade-leave-from</span> &#123;</span><br><span class="line">  <span class="comment">// 设置为隐藏</span></span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 中间的过度细节</span></span><br><span class="line"><span class="selector-class">.fade-enter-active</span>, <span class="comment">//进入的时候</span></span><br><span class="line"><span class="selector-class">.fade-leave-active</span> <span class="comment">// 离开的时候(通常不设离开样式)</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="comment">// 设置动画过度显示效果</span></span><br><span class="line">  <span class="attribute">transition</span>: opacity <span class="number">0.5s</span> <span class="number">0.2s</span>;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 结束的时候</span></span><br><span class="line"><span class="selector-class">.fade-enter-from</span>,</span><br><span class="line"><span class="selector-class">.fade-leave-to</span> &#123;</span><br><span class="line">  <span class="comment">// 设置为显示</span></span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>注意：多个transition使用不同动画，可以添加name属性，name属性的值替换v即可。</p>
<h3 id="过度动画执行顺序-mode"><a href="#过度动画执行顺序-mode" class="headerlink" title="过度动画执行顺序 mode"></a><strong>过度动画执行顺序 <code>mode</code></strong></h3><ul>
<li><strong>默认情况下，进入动画和离开动画是同时进行的。</strong></li>
<li>可以通过<code>mode</code>设置过度动画的执行顺序<ul>
<li><code>mode=&#39;out-in&#39;</code> <strong>先离开后进入</strong></li>
<li><code>mode=&#39;n-out&#39;</code> 先进入后离开</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 设置先离开后进入 --&gt;</span><br><span class="line">&lt;transition name=&quot;class-name&quot; mode=&quot;out-in&quot;&gt;</span><br><span class="line"> &lt;!-- 需要动画效果的内容 --&gt;</span><br><span class="line">&lt;transition&gt;</span><br></pre></td></tr></table></figure>



<h2 id="Vu3-自定义实例化方法mounted"><a href="#Vu3-自定义实例化方法mounted" class="headerlink" title="Vu3 自定义实例化方法mounted"></a>Vu3 自定义实例化方法<code>mounted</code></h2><p><a target="_blank" rel="noopener" href="https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#mounted">mounted自定义实例化方法介绍</a></p>
<ul>
<li>Vue支持自定义插件 也支持自定义实例化方法<ul>
<li><code>mounted</code>设置自定义方法后 需要<code>install</code>导出自定义方法 (<code>install</code> 也可以导出插件)</li>
<li>1导出方法后 通过 入口文件 <code>use.()</code>实例化自定义方法</li>
<li>Vue自定义实例化方法在模板使用时候需要 <code>v-方法名称</code></li>
</ul>
</li>
<li>Vue2自定义实例化方法是 <code>Vue.</code> Vue3自定义实例化方法是 <code>app.</code></li>
<li>代替<code>:src</code> 动态绑定图片路径方法</li>
</ul>
<p><a href="">懒加载图片的自定义实例化方法案例</a></p>
<h2 id="Vue3中的-Vue-Router"><a href="#Vue3中的-Vue-Router" class="headerlink" title="Vue3中的 Vue Router"></a>Vue3中的 <code>Vue Router</code></h2><ul>
<li>Vue3的 Vue Router 也需要按需导入 才能使用router的api</li>
<li><code>import &#123; useStore &#125; from &#39;vuex&#39;</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入Vue router方法</span></span><br><span class="line"><span class="keyword">import</span> &#123; useStore &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line"> setup () &#123;</span><br><span class="line">     <span class="comment">// 实例化Vue router方法</span></span><br><span class="line">    <span class="comment">// route相当于之前的this.$route</span></span><br><span class="line">    <span class="keyword">const</span> route = <span class="title function_">useRoute</span>()</span><br><span class="line">    <span class="comment">// 获取动态路由传来的id值</span></span><br><span class="line">  <span class="keyword">const</span> id = route.<span class="property">params</span>.<span class="property">id</span></span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="Vue3-动态路由-携带id设置"><a href="#Vue3-动态路由-携带id设置" class="headerlink" title="Vue3 动态路由 携带id设置"></a><strong>Vue3 动态路由 携带id设置</strong></h3><ul>
<li>router路由组件配置<ul>
<li>动态路由通常是二级组件 <code>children</code></li>
<li><code>path</code>是设置路由地址 根据动态地址后缀获取传递的数据 <code>componen</code>配置路由组件</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 声明常量的方式按需配置路由</span></span><br><span class="line"><span class="comment">// 导入一级路由组件</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">Layout</span> = (<span class="params"></span>) =&gt; <span class="title function_">import</span>(<span class="string">&#x27;@/views/layout&#x27;</span>)</span><br><span class="line"><span class="comment">// 导入二级路由组件(动态路由)</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">FirstCategory</span> = (<span class="params"></span>) =&gt; <span class="title function_">import</span>(<span class="string">&#x27;@/views/category/index&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> routes = [</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="comment">// 一级路由地址</span></span><br><span class="line">    <span class="attr">path</span>: <span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">    <span class="comment">// 导入一级路由组件</span></span><br><span class="line">    <span class="attr">component</span>: <span class="title class_">Layout</span>,</span><br><span class="line">    <span class="attr">children</span>: [</span><br><span class="line">      <span class="comment">// 配置二级路由(动态路由)路径携带其id值 并且导入组件</span></span><br><span class="line">      &#123; <span class="attr">path</span>: <span class="string">&#x27;/category/:id&#x27;</span>, <span class="attr">component</span>: <span class="title class_">FirstCategory</span> &#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<h3 id="配置动态路由传值"><a href="#配置动态路由传值" class="headerlink" title="配置动态路由传值"></a><strong>配置动态路由传值</strong></h3><ul>
<li>一级路由携带id配置动态路由<ul>
<li>基于<code>&lt;RouterLink&gt;</code>跳转方式(类似于a标签)</li>
<li>使用模板字符串传递动态路由参数</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;template v-if=&quot;item.children&quot;&gt;</span><br><span class="line">&lt;!-- RouterLink跳转配置动态路由数据 使用模板字符串 --&gt;</span><br><span class="line">       &lt;RouterLink v-for=&quot;sub in item.children&quot; :key=&quot;sub.id&quot; :to=&quot;`/category/sub/$&#123;sub.id&#125;`&quot;&gt;</span><br><span class="line">       &#123;&#123; 我是动态路由 &#125;&#125;</span><br><span class="line">       &lt;/RouterLink&gt;</span><br><span class="line">     &lt;/template&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>二级路由接收一级路由跳转传入的动态路由数据<ul>
<li>Vue3的 Vue Router 也需要按需导入 才能使用router的api</li>
<li><code>import &#123; useStore &#125; from &#39;vuex&#39;</code></li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入Vue router方法</span></span><br><span class="line"><span class="keyword">import</span> &#123; useStore &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line"> setup () &#123;</span><br><span class="line">     <span class="comment">// 实例化Vue router方法</span></span><br><span class="line">    <span class="comment">// route相当于之前的this.$route</span></span><br><span class="line">    <span class="keyword">const</span> route = <span class="title function_">useRoute</span>()</span><br><span class="line">    <span class="comment">// 获取动态路由传来的id值</span></span><br><span class="line">  <span class="keyword">const</span> id = route.<span class="property">params</span>.<span class="property">id</span></span><br><span class="line"> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="切换路由后滚动到顶部"><a href="#切换路由后滚动到顶部" class="headerlink" title="切换路由后滚动到顶部"></a><strong>切换路由后滚动到顶部</strong></h3><ul>
<li>只要切换路由组件(切换地址) 就会默认滚到顶部(一级二级都会触发)</li>
<li><code>scrollBehavior ()</code> 方法可以设置滚到顶部</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 设置Vue router实例化</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="title function_">createRouter</span>(&#123;</span><br><span class="line">  <span class="comment">// 设置hash路径方式</span></span><br><span class="line">  <span class="attr">history</span>: <span class="title function_">createWebHashHistory</span>(),</span><br><span class="line">  <span class="comment">// 映射 router配置的路由(配置的路由组件)</span></span><br><span class="line">  routes,</span><br><span class="line">  <span class="comment">// Vue router的切换路由 滚动到顶部</span></span><br><span class="line">  scrollBehavior () &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="comment">// x: 0, y: 0 // vue2</span></span><br><span class="line">      <span class="comment">// left控制页面水平方向滚动</span></span><br><span class="line">      <span class="comment">// top控制垂直方向滚动</span></span><br><span class="line">      <span class="attr">left</span>: <span class="number">0</span>, <span class="attr">top</span>: <span class="number">0</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 导出router实例化对象</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> router</span><br></pre></td></tr></table></figure>

<h3 id="处理跳转细节"><a href="#处理跳转细节" class="headerlink" title="处理跳转细节"></a><strong>处理跳转细节</strong></h3><blockquote>
<p>目的: 在路由跳转的时候，优化跳转的细节。</p>
</blockquote>
<p>大致需求：</p>
<ul>
<li>通过<code>watch</code>监听变化 从而获取相应的数据 会导致非本级路由触发<code>watch</code>(<code>watch</code>无法判断是否是一级二级)</li>
<li>切换到二级类目路由的时候也有ID，但是也触发了<code>watch</code>导致发送了请求，需要处理。</li>
<li>通过<code>indexOf</code> 来判断是否存在二级路由 如果存在 <code>return</code>出去</li>
</ul>
<blockquote>
<p>案例: 处理watch 筛选二级路由</p>
</blockquote>
<ul>
<li>判断是否存在<code>/category/sub</code>二级路由 如果存在 筛选出去 不调用接口方法<ul>
<li>通过<code>indexOf</code> 来判断是否存在二级路由 如果存在 return出去</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取一级分类相关的商品数据</span></span><br><span class="line"><span class="keyword">const</span> goods = <span class="title function_">ref</span>([])</span><br><span class="line"><span class="comment">// 只要路由参数params.id值发生变化，那么就会触发侦听（一级和二级分类都是动态路由）</span></span><br><span class="line"><span class="title function_">watch</span>(<span class="function">() =&gt;</span> route.<span class="property">params</span>.<span class="property">id</span>, <span class="function">(<span class="params">newId</span>) =&gt;</span> &#123; <span class="comment">// 监控路由的变动 获取路由相应的数据</span></span><br><span class="line">  <span class="comment">// 屏蔽掉二级分类路由参数的变化</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(route.<span class="property">params</span>.<span class="property">id</span>)</span><br><span class="line">  <span class="comment">// 进行查询 如果查询到&#x27;/category/sub&#x27; 就让其return(查不到是-1 查到是1)</span></span><br><span class="line">  <span class="keyword">if</span> (route.<span class="property">path</span>.<span class="title function_">indexOf</span>(<span class="string">&#x27;/category/sub&#x27;</span>) !== -<span class="number">1</span>) <span class="keyword">return</span></span><br><span class="line">  <span class="title function_">findTopCategory</span>(newId).<span class="title function_">then</span>(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">    goods.<span class="property">value</span> = data.<span class="property">result</span>.<span class="property">children</span></span><br><span class="line">  &#125;)</span><br><span class="line">&#125;, &#123;</span><br><span class="line">  <span class="comment">// 页面加载时候 启动watch</span></span><br><span class="line">  <span class="attr">immediate</span>: <span class="literal">true</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p><strong>总结：</strong>跳转的时候需要注意些细节</p>
<h2 id="Vue3的nextTick-gt-Dom节点加载完毕后执行"><a href="#Vue3的nextTick-gt-Dom节点加载完毕后执行" class="headerlink" title="Vue3的nextTick(()=&gt;{}) Dom节点加载完毕后执行"></a>Vue3的<code>nextTick(()=&gt;&#123;&#125;)</code> Dom节点加载完毕后执行</h2><ul>
<li><strong>当数据更新了，在dom中渲染完毕后，自动执行<code>nextTick()</code>里面的代码，</strong></li>
<li>在Vue3中 需要按需导入<code>nextTick</code>才可以使用</li>
<li>通常先置空数据(null) 然后通过<code>nextTick()</code>重新赋值 实现响应式数据<ul>
<li>保证之前的数据先清空，然后，再重新赋值新的数据</li>
</ul>
</li>
</ul>
<blockquote>
<p>使用案例: </p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 通过watch 监控是否切换路由 如果切换路由重新获取数据</span></span><br><span class="line"><span class="title function_">watch</span>(<span class="function">() =&gt;</span> route.<span class="property">params</span>.<span class="property">id</span>, <span class="function">(<span class="params">newId</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 只监控当前页面的路由</span></span><br><span class="line">  <span class="keyword">if</span> (route.<span class="property">path</span> !== <span class="string">&#x27;/product/&#x27;</span> + newId) <span class="keyword">return</span></span><br><span class="line">   <span class="comment">// 调用接口获取新的信息数据</span></span><br><span class="line">  <span class="title function_">findGoods</span>(newId).<span class="title function_">then</span>(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 先置空之前的数据</span></span><br><span class="line">    goodDetail.<span class="property">value</span> = <span class="literal">null</span></span><br><span class="line">    <span class="comment">// 然后通过nextTick()组价加载完成后执行 获取数据</span></span><br><span class="line">    <span class="comment">// 保证之前的商品数据先清空，然后，再重新赋值新的数据</span></span><br><span class="line">    <span class="title function_">nextTick</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">     <span class="comment">// 把新的信息数据储存</span></span><br><span class="line">      goodDetail.<span class="property">value</span> = data.<span class="property">result</span></span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;, &#123;</span><br><span class="line">  <span class="attr">immediate</span>: <span class="literal">true</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="Vue3-组合方式-拆分组件"><a href="#Vue3-组合方式-拆分组件" class="headerlink" title="Vue3 组合方式 拆分组件"></a>Vue3 组合方式 拆分组件</h2><ul>
<li>如果一个组件中 有多个功能全部写在<code>setup()</code>里 不方便维护 所以把每个功能拆分出来 再导入</li>
<li>简化<code>setup()</code>中的代码，方便代码的重用和后期的维护</li>
<li>拆分的名称 和 导入的名称 不要一致 (不能重名)</li>
</ul>
<blockquote>
<p>无需传参的拆分</p>
</blockquote>
<ul>
<li>无需设置参数 直接拆分即可</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    // 把一个功能全部代码拆分</span><br><span class="line">    const useGoods = () =&gt; &#123;</span><br><span class="line">     // 功能的全部代码(假设有)</span><br><span class="line">    &#125;</span><br><span class="line">  export default &#123;</span><br><span class="line">  name: &#x27;XtxGoodsPage&#x27;,</span><br><span class="line">  components: &#123; GoodsRelevant, GoodsImage &#125;,</span><br><span class="line">  setup () &#123;</span><br><span class="line">     // 导入拆分的代码</span><br><span class="line">    // 简化setup中的代码，方便代码的重用和后期的维护</span><br><span class="line">    const goodsDetail = useGoods()</span><br><span class="line">    // return出去导入的拆分代码</span><br><span class="line">    // 这里是template模板中需要的数据</span><br><span class="line">    return &#123; goodsDetail &#125; </span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>需要传参的拆分</p>
</blockquote>
<ul>
<li>有时候需要获取父组件传来的值 <code>props</code> 和 <code>setup()</code>方法(字串符 <code>emit</code>)就需要传参</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="comment">// 把一个功能全部代码拆分</span></span><br><span class="line">    <span class="comment">// 接收拆分后的参数</span></span><br><span class="line">    <span class="keyword">const</span> <span class="title function_">useGoods</span> = (<span class="params">props,emit</span>) =&gt; &#123;</span><br><span class="line">     <span class="comment">// 功能的全部代码(假设有)</span></span><br><span class="line">    &#125;</span><br><span class="line">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;XtxGoodsPage&#x27;</span>,</span><br><span class="line">  <span class="attr">components</span>: &#123; <span class="title class_">GoodsRelevant</span>, <span class="title class_">GoodsImage</span> &#125;,</span><br><span class="line">  setup (props,&#123;emit&#125;) &#123; <span class="comment">// 结构赋值 emit </span></span><br><span class="line">     <span class="comment">// 导入拆分的代码</span></span><br><span class="line">     <span class="comment">// 如果需要传参 需要设置参数 </span></span><br><span class="line">    <span class="keyword">const</span> goodsDetail = <span class="title function_">useGoods</span>(props,emit)</span><br><span class="line">    <span class="comment">// return出去导入的拆分代码</span></span><br><span class="line">    <span class="comment">// 这里是template模板中需要的数据</span></span><br><span class="line">    <span class="keyword">return</span> &#123; goodsDetail &#125; </span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>



<h2 id="Vue3-重置对象方法"><a href="#Vue3-重置对象方法" class="headerlink" title="Vue3 重置对象方法"></a>Vue3 重置对象方法</h2><ul>
<li>Vue2中 可以用<code>$options</code>来重置对象里面内容 </li>
<li>在Vue3中不能使用<code>$options</code> 所以需要遍历 来重置对象里面的数据<ul>
<li>通过 <code>for in</code> 来实现重置对象里面的数据</li>
</ul>
</li>
</ul>
<blockquote>
<p>重置对象方法案例</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">setup () &#123;</span><br><span class="line"><span class="comment">// 需要重置的对象数据</span></span><br><span class="line">   <span class="keyword">const</span> changeResult = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">     <span class="attr">provinceCode</span>: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">     <span class="attr">provinceName</span>: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">     <span class="attr">cityCode</span>: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">     <span class="attr">cityName</span>: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">     <span class="attr">countyCode</span>: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">     <span class="attr">countyName</span>: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">     <span class="attr">fullLocation</span>: <span class="string">&#x27;&#x27;</span></span><br><span class="line">   &#125;)</span><br><span class="line">    <span class="comment">// 打开弹窗时，重置数据</span></span><br><span class="line">   <span class="keyword">const</span> <span class="title function_">toggle</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">   <span class="keyword">for</span> (<span class="keyword">const</span> key <span class="keyword">in</span> changeResult) &#123;</span><br><span class="line">       <span class="comment">// key是属性名(键)</span></span><br><span class="line">       changeResult[key] = <span class="string">&#x27;&#x27;</span></span><br><span class="line">     &#125;</span><br><span class="line">   &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h2 id="Vue3的深度选择器-deep"><a href="#Vue3的深度选择器-deep" class="headerlink" title="Vue3的深度选择器 :deep()"></a>Vue3的深度选择器 <code>:deep()</code></h2><ul>
<li>深度选择器通常作用于修改封装好组件的样式 覆盖组件之前的样式</li>
<li>Vue3的深度选择器 <code>:deep(类名)</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Vue3中深度选择器使用规则 :deep(类名)</span></span><br><span class="line"> :<span class="title function_">deep</span>(<span class="params">.xtx-carousel</span>) &#123;</span><br><span class="line">  <span class="attr">height</span>: 380px;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>



<h2 id="Vue3组件的控制component"><a href="#Vue3组件的控制component" class="headerlink" title="Vue3组件的控制component"></a>Vue3组件的控制<code>component</code></h2><ul>
<li>Vue.js是由多个组件(component)组合而成的 </li>
<li><code>  &lt;component :is=&#39;&#39;&gt;&lt;/component&gt;</code> 相当于有 直接导入组件 不是动态的 可以实现切换不同的组件(显示与隐藏)<ul>
<li><code>:is</code> 是动态绑定导入的组件名</li>
</ul>
</li>
<li>通常可以用 <code>component</code>来实现选项卡功能</li>
<li>此方法可以代替 <code>v-if</code>来实现组件的显示与隐藏</li>
</ul>
<blockquote>
<p>点击后 动态切换组件</p>
</blockquote>
<ul>
<li>设置点击事件 携带需要切换的组件名称 实现点击后 切换相应的组件<ul>
<li>切换原理: 点击后 获取传来的组件名参数 赋值给控制组件切换的变量 实现动态切换组件</li>
</ul>
</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">      &lt;!-- 设置点击事件 携带需要切换的组件名称 实现点击后 切换相应的组件 --&gt;</span><br><span class="line">      &lt;a @click=&#x27;toggle(&quot;GoodsDetail&quot;)&#x27; href=&quot;javascript:;&quot;&gt;商品详情&lt;/a&gt;</span><br><span class="line">      &lt;a @click=&#x27;toggle(&quot;GoodsComment&quot;)&#x27; href=&quot;javascript:;&quot;&gt;商品评价&lt;/a&gt;</span><br><span class="line">    &lt;component :is=&#x27;componentName&#x27;&gt;&lt;/component&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    // 导入模拟要动态切换的组件</span><br><span class="line">import GoodsDetail from &#x27;./goods-detail.vue&#x27;</span><br><span class="line">import GoodsComment from &#x27;./goods-comment.vue&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;GoodsTabs&#x27;,</span><br><span class="line">    // 导入模拟切换的组件</span><br><span class="line">  components: &#123; GoodsDetail, GoodsComment &#125;,</span><br><span class="line">   setup () &#123;</span><br><span class="line">    //  当前组件的名称(默认显示的组件)</span><br><span class="line">    const componentName = ref(&#x27;GoodsDetail&#x27;)</span><br><span class="line">    // 点击后 获取传来的组件名参数 赋值给控制组件切换的变量 实现动态切换组件</span><br><span class="line">    const toggle = (name) =&gt; &#123;</span><br><span class="line">    // 把点击携带的组件名赋值给 控制组件切换的变量</span><br><span class="line">      componentName.value = name</span><br><span class="line">    &#125;</span><br><span class="line">   // 把控制组件切换的变量返回</span><br><span class="line">  return &#123; toggle, componentName &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h2 id="Vue3在模板内设置样式-style"><a href="#Vue3在模板内设置样式-style" class="headerlink" title="Vue3在模板内设置样式 :style"></a>Vue3在模板内设置样式 <code>:style</code></h2><ul>
<li>Vue3的模板 可以直接绑定事件 不需要 <code>.native</code>可以直接绑定事件</li>
<li><code>:style</code>可以直接在模板上 设置样式(高权重) 事件监听也支持</li>
<li>可以在导入的组件上 直接设置<code>:style</code></li>
</ul>
<blockquote>
<p>简单案例</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	&lt;div&gt;</span><br><span class="line">		&lt;!-- 导入的组件上面绑定的原生属性会自动绑定到组件的根节点上 --&gt;</span><br><span class="line">        &lt;XtxButton :style=&#x27;&#123;marginTop: &quot;20px&quot;&#125;&#x27; type=&#x27;primary&#x27;&gt;加入购物车&lt;/XtxButton&gt;</span><br><span class="line">	&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>

<h2 id="Vue3动态修改style"><a href="#Vue3动态修改style" class="headerlink" title="Vue3动态修改style"></a>Vue3动态修改style</h2><ul>
<li>可以通过<code>v-bind</code>绑定css&#x2F;html属性 动态修改指定的样式</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;p @click=&quot;changeColor&quot;&gt;hello&lt;/p&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script setup&gt;</span><br><span class="line">import &#123; reactive &#125; from &quot;vue&quot;</span><br><span class="line">// 设置一个默认的颜色变量</span><br><span class="line">const theme = reactive(&#123;</span><br><span class="line">  color: &#x27;red&#x27;</span><br><span class="line">&#125;) </span><br><span class="line">// 点击后 修改颜色变量</span><br><span class="line"> const changeColor = ()=&gt;&#123;</span><br><span class="line">  theme.color=&quot;black&quot;</span><br><span class="line">  console.log(theme);</span><br><span class="line">&#125;</span><br><span class="line"> return &#123; changeColor &#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line"> /* v-bind绑定你设置的变量 */</span><br><span class="line">p &#123;</span><br><span class="line">  color: v-bind(&#x27;theme.color&#x27;);</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<h2 id="Vue3接收父组件传来的固定值-非动态值-attrs"><a href="#Vue3接收父组件传来的固定值-非动态值-attrs" class="headerlink" title="Vue3接收父组件传来的固定值(非动态值) attrs"></a>Vue3接收父组件传来的固定值(非动态值) <code>attrs</code></h2><ul>
<li><code>props</code>可以接收父组件传来的 动态数据 </li>
<li><code>attrs</code>可以接收父组件传来的 固定数据 就算用动态绑定 他也是接收固定数据</li>
<li><code>attrs</code> 调用方式和 <code>emit</code>一样 需要<code>setup()</code> 参数2中结构赋值中得到该方法<ul>
<li><code>attrs.父组件传参的名称</code> 来获取父组件传来的数据<ul>
<li><code>attrs[&#39;带-的父组件传参的名称&#39;]</code>如果父组件传参的名称携带 <code>-</code> 需要这样设置</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">setup (props,&#123;attrs&#125;) &#123;</span><br><span class="line"><span class="comment">// 普通父组件传参的名称</span></span><br><span class="line"><span class="keyword">const</span> ret = attrs.父组件传参的名称</span><br><span class="line"><span class="comment">// 带-的父组件传参的名称</span></span><br><span class="line"><span class="keyword">const</span> ret = attrs[<span class="string">&#x27;带-的父组件传参的名称&#x27;</span>]</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="Vue3设置Vue虚拟Dom方法-createVNode"><a href="#Vue3设置Vue虚拟Dom方法-createVNode" class="headerlink" title="Vue3设置Vue虚拟Dom方法 createVNode()"></a>Vue3设置Vue虚拟Dom方法 <code>createVNode()</code></h2><ul>
<li>一般的组件 都只能在<code>template</code>模板中使用 在<code>setup()</code>很难调用 如果希望插件能像方法一样 在<code>setup()</code>中使用 就需要设置为虚拟Dom方法实现功能 并且支持<code>props</code>传参</li>
<li>通过会把一些 全局弹窗 设置为虚拟Dom方法</li>
<li><code>createVNode()</code> 具有两个参数 <ul>
<li>参数1 表示导入的组件(需要虚拟化的组件)</li>
<li>参数2 表示传递给组件的props值(虚拟Dom的参数)</li>
</ul>
</li>
<li>如果设置全局弹窗效果 需要配合 <code>render()</code>函数 把<code>createVNode()</code>设置的虚拟Dom 导入全局(window)的div</li>
</ul>
<h3 id="创建一个全局弹窗的Vue虚拟Dom方法"><a href="#创建一个全局弹窗的Vue虚拟Dom方法" class="headerlink" title="创建一个全局弹窗的Vue虚拟Dom方法"></a><strong>创建一个全局弹窗的Vue虚拟Dom方法</strong></h3><blockquote>
<p>目的：在接口请求报错的时候给用户进行提示</p>
</blockquote>
<p>弹窗虚拟Dom功能分析：</p>
<ul>
<li>设置一个具有弹窗效果的普通组件(样式 控制参数)</li>
<li>将该组件设置为的Vue虚拟Dom方法<ul>
<li>使用<code>createVNode()</code> 方法把组件设置为Vue虚拟Dom方法</li>
<li>需要配合 <code>render()</code>函数 把<code>createVNode()</code>设置的虚拟Dom 导入全局(window)的div <ul>
<li>这样调用的时候 以全局window为基准弹窗 而非组件内部弹窗</li>
</ul>
</li>
</ul>
</li>
<li>在Vue组件中 调用该Vue虚拟Dom方法 并且设置参数</li>
</ul>
<blockquote>
<p>全局弹窗的Vue虚拟Dom方法 实现步骤</p>
</blockquote>
<ol>
<li><p>设置一个具有弹窗效果的普通组件(样式 参数)</p>
<ul>
<li><p>弹窗组件名是<code>xtx-message.vue</code> (模拟)</p>
<p>(这里假设弹窗样式 就不写了)</p>
</li>
</ul>
</li>
<li><p>把弹窗组件设置为Vue的虚拟Dom方法</p>
<ul>
<li>使用<code>createVNode()</code> 方法把组件设置为Vue的虚拟Dom方法</li>
<li>需要配合 <code>render()</code>函数 把<code>createVNode()</code>设置的虚拟Dom 导入全局(window)的div <ul>
<li>这样调用的时候 以全局window为基准弹窗 而非组件内部弹窗</li>
</ul>
</li>
</ul>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入弹窗效果插件</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">XtxMessage</span> <span class="keyword">from</span> <span class="string">&#x27;../../utils/xtx-message.vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 导入Vue3使用的方法</span></span><br><span class="line"><span class="keyword">import</span> &#123; createVNode, render &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建一个全局组件的div(这样调用的时候 以全局window为基准弹窗 而非组件内部弹窗)</span></span><br><span class="line"><span class="comment">// 动态创建一个div，然后添加到页面的body里面，用于放置提示组件</span></span><br><span class="line"><span class="keyword">const</span> div = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;div&#x27;</span>)</span><br><span class="line">div.<span class="title function_">setAttribute</span>(<span class="string">&#x27;class&#x27;</span>, <span class="string">&#x27;xtx-message-container&#x27;</span>)</span><br><span class="line"><span class="variable language_">document</span>.<span class="property">body</span>.<span class="title function_">appendChild</span>(div)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> (&#123; type = <span class="string">&#x27;success&#x27;</span>, text = <span class="string">&#x27;error&#x27;</span> &#125;) =&gt; &#123;</span><br><span class="line">  <span class="comment">// 这里需要把XtxMessage组件填充到上述的div当中</span></span><br><span class="line">  <span class="comment">// createVNode用于将组件渲染为虚拟节点</span></span><br><span class="line">  <span class="comment">// 参数一表示导入的组件</span></span><br><span class="line">  <span class="comment">// 参数二表示传递给组件的props属性(插件的参数)</span></span><br><span class="line">  <span class="keyword">const</span> vnode = <span class="title function_">createVNode</span>(<span class="title class_">XtxMessage</span>, &#123; type, text &#125;)</span><br><span class="line">  <span class="comment">// 需要把vnode填充到div里面</span></span><br><span class="line">  <span class="comment">// Vue2中render函数是选项，用来生成组件的模板</span></span><br><span class="line">  <span class="comment">// Vue3中render函数是导入的</span></span><br><span class="line">  <span class="title function_">render</span>(vnode, div)</span><br><span class="line">  <span class="comment">// 3秒后把XtxMessage组件进行隐藏(其实就是把div中组件销毁)</span></span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 清空div里面的内容</span></span><br><span class="line">    <span class="title function_">render</span>(<span class="literal">null</span>, div)</span><br><span class="line">  &#125;, <span class="number">3000</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// -----------------------------------------</span></span><br><span class="line"><span class="comment">// 在setup()中使用方法</span></span><br><span class="line"><span class="comment">// Message(&#123;type: &#x27;success&#x27;, text: &#x27;登录失败&#x27;&#125;)</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ol start="3">
<li>在Vue组件的<code>setup()</code>中使用<ul>
<li>先导入设置的 弹窗虚拟Dom方法</li>
<li>然后在<code>setup()</code>中使用该弹窗虚拟Dom方法</li>
</ul>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//导入封装的 弹窗虚拟Dom方法</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Message</span> <span class="keyword">from</span> <span class="string">&#x27;@/components/library/Message.js&#x27;</span></span><br><span class="line">setup () &#123;</span><br><span class="line">  	<span class="comment">// setup ()里面直接调用即可</span></span><br><span class="line">  	<span class="title class_">Message</span>(&#123;<span class="attr">type</span>: <span class="string">&#x27;success&#x27;</span>, <span class="attr">text</span>: <span class="string">&#x27;登录失败&#x27;</span>&#125;)</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<p>总结：</p>
<ol>
<li>基于组件渲染虚拟节点：createVNode方法</li>
<li>渲染VNode到指定位置:  render(vnode, dom)</li>
</ol>
<h2 id="Vue3中创建原型链对象-Vue2中的-this-方法名"><a href="#Vue3中创建原型链对象-Vue2中的-this-方法名" class="headerlink" title="Vue3中创建原型链对象 (Vue2中的 this.$方法名)"></a>Vue3中创建原型链对象 (Vue2中的 this.$方法名)</h2><ul>
<li><p>在Vue3中也支持创建原型链对象 并且支持调用 通过<code>app.config.globalProperties</code>来创建 然后通过<code>use()</code>实例</p>
<ul>
<li>Vue2中使用原型链对象方法是 this.$方法名 但是在Vue3中的<code>setup()</code>中不能使用 <code>this</code> 和 <code>$</code></li>
</ul>
</li>
<li><p><font color =#ff3040>注意: 创建原型链对象的方法 需要先创建虚拟Dom方法 然后才能创建原型链对象(详看31)</font></p>
</li>
<li><p>创建原型链对象的方法</p>
<ul>
<li><code>app.config.globalProperties.$要创建的原型链方法名 = 创建的虚拟Dom方法</code></li>
</ul>
</li>
<li><p>通常在 <code>main.js</code>入口文件创建Vue3原型链对象方法</p>
<p>命名可以不用<code>$</code>但是一般都会默认有<code>$</code></p>
</li>
</ul>
<blockquote>
<p>创建方法</p>
</blockquote>
<ul>
<li>在 <code>main.js</code>入口文件创建Vue3原型链对象方法</li>
<li>通过<code>app.config.globalProperties</code>来创建 然后通过<code>use()</code>实例</li>
<li><font color =#ff3040>注意: 创建原型链对象的方法 需要先创建虚拟Dom方法 然后才能创建原型链对象(详看31)</font></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入实例化的Vue3</span></span><br><span class="line"><span class="keyword">import</span> &#123; createApp &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="comment">// 导入Vue3要添加的原型链方法(需要先创建虚拟Dom方法)</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">Message</span> <span class="keyword">from</span> <span class="string">&#x27;./components/library/Message.js&#x27;</span></span><br><span class="line"><span class="comment">// 创建Vue3要添加的原型链方法</span></span><br><span class="line"><span class="keyword">const</span> ret = &#123;</span><br><span class="line">  install (app) &#123;</span><br><span class="line">    <span class="comment">// 通过config.globalProperties给其添加原型链方法</span></span><br><span class="line">    <span class="comment">// app.config.globalProperties.$要创建的原型链方法名 = 创建的虚拟Dom方法</span></span><br><span class="line">    app.<span class="property">config</span>.<span class="property">globalProperties</span>.<span class="property">$message</span> = <span class="title class_">Message</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 创建一个vue应用实例(.use() 可以实例化导入)</span></span><br><span class="line"><span class="title function_">createApp</span>(<span class="title class_">App</span>).<span class="title function_">use</span>(ret).<span class="title function_">mount</span>(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>

<blockquote>
<p>如果想使用原型链对象方法 需要通过<code>getCurrentInstance()</code>使用原型链对象方法 来使用 (往下看33)</p>
</blockquote>
<h2 id="Vue3中使用原型链对象方法-getCurrentInstance"><a href="#Vue3中使用原型链对象方法-getCurrentInstance" class="headerlink" title="Vue3中使用原型链对象方法 getCurrentInstance()"></a>Vue3中使用原型链对象方法 <code>getCurrentInstance()</code></h2><ul>
<li>在Vue3的<code>setup()</code>中 无法使用 <code>this.$</code>方法(包括模板template中的<code>$</code>)<ul>
<li>如果需要使用Vue3的 this.$方法 就需要通过<code>getCurrentInstance()</code> Vue3方法来实现(需要实例化)<ul>
<li><code>实例化名称.proxy.$原型链方法名()</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<blockquote>
<p>获取原型链对象案例</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">// 导入getCurrentInstance 使用原型链对象方法</span><br><span class="line">import &#123; getCurrentInstance &#125; from &#x27;vue&#x27;</span><br><span class="line">    // 在setup()中使用</span><br><span class="line">setup()&#123;</span><br><span class="line">    // 实例化 getCurrentInstance 使用原型链对象方法</span><br><span class="line">     const instance = getCurrentInstance()</span><br><span class="line">     // 调用Vue3的原型链对象方法 实例化名称.proxy.$原型链方法名()</span><br><span class="line">    instance.proxy.$message(&#123; type: &#x27;success&#x27;, text: &#x27;加入成功&#x27; &#125;)</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h2 id="Vue-router-两种跳转方法-path和fullPath"><a href="#Vue-router-两种跳转方法-path和fullPath" class="headerlink" title="Vue-router 两种跳转方法 path和fullPath"></a>Vue-router 两种跳转方法 <code>path</code>和<code>fullPath</code></h2><ul>
<li><code>fullPath</code>是路由全地址 带参数</li>
<li><code>path</code>是路径，不带参数</li>
</ul>
<blockquote>
<p>跳转案例(携带参数)</p>
</blockquote>
<p>如：192.168.0.1&#x2F;index?page&#x3D;1</p>
<ul>
<li><code>fullPath</code>为&#x2F;index?page&#x3D;1</li>
<li><code>path</code>为&#x2F;index</li>
</ul>
<h2 id="Vue3的-native-修饰符"><a href="#Vue3的-native-修饰符" class="headerlink" title="Vue3的 .native 修饰符"></a>Vue3的 <code>.native</code> 修饰符</h2><ul>
<li><p><code>v-on</code> 的 <code>.native</code> 修饰符已被移除。同时，新增的 <code>emits</code> 选项允许子组件定义真正会被触发的事件。</p>
<p>因此，对于子组件中<em>未</em>被定义为组件触发的所有事件监听器，Vue 现在将把它们作为原生事件监听器添加到子组件的根元素中 (除非在子组件的选项中设置了 <code>inheritAttrs: false</code>)。</p>
</li>
</ul>
<blockquote>
<p>2.x 语法</p>
</blockquote>
<ul>
<li>默认情况下，传递给带有 <code>v-on</code> 的组件的事件监听器只有通过 <code>this.$emit</code> 才能触发。要将原生 DOM 监听器添加到子组件的根元素中，可以使用 <code>.native</code> 修饰符：</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;my-component</span><br><span class="line">v-on:close=&quot;handleComponentEvent&quot;</span><br><span class="line">v-on:click.native=&quot;handleNativeClickEvent&quot;</span><br><span class="line">/&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>3.x 语法</p>
</blockquote>
<ul>
<li>父组件添加点击事件</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;my-component</span><br><span class="line">v-on:close=&quot;handleComponentEvent&quot;</span><br><span class="line">v-on:click=&quot;handleNativeClickEvent&quot;</span><br><span class="line">/&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>子组件接收点击事件 <code>MyComponent.vue</code></li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">emits: [&#x27;close&#x27;]</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>


        </div>
        
            <div class="kratos-copyright text-center clearfix">
                <h5>本作品采用 <a rel="license nofollow" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
            </div>
        
        <footer class="kratos-entry-footer clearfix">
            
                <div class="post-like-donate text-center clearfix" id="post-like-donate">
                
                
                    <a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
                    <div class="share-wrap" style="display: none;">
    <div class="share-group">
        <a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-qq"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-star"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weixin"></i>
            </div>
            <div class="share-int">
                <div class="qrcode" id="wechat-qr"></div>
                <p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weibo"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-facebook"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-twitter"></i>
            </div>
        </a>
    </div>
    <script type="text/javascript">
        $(()=>{
            new QRCode("wechat-qr", {
                text: "https://cuishikang.gitee.io/2099/01/27/Vue3/1.1.1_Vue_study/",
                width: 150,
                height: 150,
                correctLevel : QRCode.CorrectLevel.H
            });
        });
        function share(dest) {
            const qqBase        = "https://connect.qq.com/widget/shareqq/index.html?";
            const weiboBase     = "https://service.weibo.com/share/share.php?";
            const qzoneBase     = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            const facebookBase  = "https://www.facebook.com/sharer/sharer.php?";
            const twitterBase   = "https://twitter.com/intent/tweet?";
            const hostUrl       = "https://cuishikang.gitee.io/2099/01/27/Vue3/1.1.1_Vue_study/";
            const title         = "「Vue3 学习手册(博客版)」";
            const excerpt       = `::: tip 介绍下一个目标 全面拥抱Vue3时代 :::`;
            let _URL;
            switch (dest) {
                case "qq"       : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";     break;
                case "weibo"    : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt;                                 break;
                case "qzone"    : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";  break;
                case "facebook" : _URL = facebookBase+"u="+hostUrl;                                                        break;
                case "twitter"  : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl;                                break;
            }
            window.open(_URL);
        };
    </script>
</div>
                
                </div>
            
            <div class="footer-tag clearfix">
                <div class="pull-left">
                <i class="fa fa-tags"></i>
                    <a class="tag-none-link" href="/tags/Vue3/" rel="tag">Vue3</a>
                </div>
                <div class="pull-date">
                <span>最后编辑：2022-02-19</span>
                </div>
            </div>
        </footer>
    </div>
    
        <nav class="navigation post-navigation clearfix" role="navigation">
            
            <div class="nav-previous clearfix">
                <a title=" JS 滚动到指定位置和回到顶部" href="/2022/02/28/JavaScript/0.2_scroll/">&lt; 上一篇</a>
            </div>
            
            
            <div class="nav-next clearfix">
                <a title=" JavaScript树形数据转换算法" href="/2111/02/19/JavaScript/5_algorithm_tree/">下一篇 &gt;</a>
            </div>
            
        </nav>
    
    
</article>

        

            </section>

        

                
            

<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
    <!-- 文章和页面根据splitter来分割，没有的话就从头开始设置为sticky -->
    
    
                <aside id="krw-about" class="widget widget-kratos-about clearfix">
    <div class="photo-background"></div>
    <div class="photo-wrapper clearfix">
        <div class="photo-wrapper-tip text-center">
            <img class="about-photo" src="https://gitee.com/cuishikang/tmp/raw/master/img/20220220194141.png" />
        </div>
    </div>
    <div class="textwidget">
        <p class="text-center"></p>
    </div>
    <div class="site-meta">
        <a class="meta-item" href="/archives/">
            <span class="title">
                文章
            </span>
            <span class="count">
                91
            </span>
        </a>
        <a class="meta-item" href="/categories/">
            <span class="title">
                分类
            </span>
            <span class="count">
                13
            </span>
        </a>
        <a class="meta-item" href="/tags/">
            <span class="title">
                标签
            </span>
            <span class="count">
                33
            </span>
        </a>
    </div>
</aside>
            
                    <div class="sticky-area">
                
                
  <aside id="krw-categories" class="widget widget-kratos-categories clearfix">
    <h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Css/">Css</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/RABC/">RABC</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vscode/">Vscode</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a><span class="category-list-count">13</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/">Vue3</a><span class="category-list-count">25</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue%E7%A7%BB%E5%8A%A8%E5%A4%B4%E6%9D%A1%E9%A1%B9%E7%9B%AE/">Vue移动头条项目</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/animation/">animation</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/axios/">axios</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/other/">other</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/uniapp/">uniapp</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue-element-admin/">vue-element-admin</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/">小程序</a><span class="category-list-count">2</span></li></ul>
  </aside>


            
                
  <aside id="krw-tags" class="widget widget-kratos-tags clearfix">
    <h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
      <div class="tag-clouds">
        <a href="/tags/Css/" style="font-size: 0.66em;">Css</a> <a href="/tags/H5Video/" style="font-size: 0.6em;">H5Video</a> <a href="/tags/JavaScript/" style="font-size: 0.74em;">JavaScript</a> <a href="/tags/My-project/" style="font-size: 0.6em;">My project</a> <a href="/tags/QQ/" style="font-size: 0.6em;">QQ</a> <a href="/tags/RABC/" style="font-size: 0.6em;">RABC</a> <a href="/tags/Vant/" style="font-size: 0.71em;">Vant</a> <a href="/tags/VeeValidate/" style="font-size: 0.6em;">VeeValidate</a> <a href="/tags/Vscode/" style="font-size: 0.6em;">Vscode</a> <a href="/tags/Vue/" style="font-size: 0.8em;">Vue</a> <a href="/tags/Vue-Router/" style="font-size: 0.6em;">Vue Router</a> <a href="/tags/Vue3/" style="font-size: 0.77em;">Vue3</a> <a href="/tags/Vuex/" style="font-size: 0.6em;">Vuex</a> <a href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 0.74em;">Vue移动端</a> <a href="/tags/Windows/" style="font-size: 0.6em;">Windows</a> <a href="/tags/animation/" style="font-size: 0.63em;">animation</a> <a href="/tags/axios/" style="font-size: 0.69em;">axios</a> <a href="/tags/echarts/" style="font-size: 0.6em;">echarts</a>
      </div>
  </aside>

            
                
  <aside id="krw-posts" class="widget widget-kratos-posts">
  <h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
  <div class="tab-content">
      <ul class="list-group">
        
        
          
          
            <a class="list-group-item" href="/2111/02/19/JavaScript/5_algorithm_tree/"><i class="fa  fa-book"></i> JavaScript树形数据转换算法</a>
            
          
        
          
          
            <a class="list-group-item" href="/2099/01/27/Vue3/1.1.1_Vue_study/"><i class="fa  fa-book"></i> Vue3 学习手册(博客版)</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/28/JavaScript/0.2_scroll/"><i class="fa  fa-book"></i> JS 滚动到指定位置和回到顶部</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/23/Vue/5_Vue_nextTick/"><i class="fa  fa-book"></i> 理解$nextTick</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/20/hello-world/"><i class="fa  fa-book"></i> Hello World</a>
            
          
        
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
      </ul>
  </div>
  </aside>

            
    </div>
</section>
        
        </div>
    </div>
</div>
<footer>
    <div id="footer"  class="ap-lrc"  >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 footer-list text-center">
                    <ul class="kratos-social-icons">
                        
                        
                        <li><a target="_blank" rel="nofollow" href="https://t.me/CandyUnion"><i class="fa fa-telegram"></i></a></li>
                        
                        
                        
                        <li><a target="_blank" rel="me" href="https://nya.one/@Candinya"><i class="fa fa fa-share-alt-square"></i></a></li>
                        <li><a target="_blank" rel="nofollow" href="https://github.com/Candinya"><i class="fa fa-github"></i></a></li>
                        
                    </ul>
                    <ul class="kratos-copyright">
                        <div>
                            <li>&copy; 2022 小崔的博客 版权所有.</li>
                            <li>本站已运行<span id="span_dt">Loading...</span></li>
                        </div>
                        <div>
                            <li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
                            <li>Site built with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by cuishikang.</li>
                        </div>
                        <div>
                            <li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
                            <li>Hosted on <a href="https://github.io" target="_blank">Github Pages</a></li>
                        </div>
                        <div>
                            
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="kr-tool text-center">
            <div class="tool">
                
                    <div class="box search-box">
                        <a href="/search/">
                            <span class="fa fa-search"></span>
                        </a>
                    </div>
                
                
                    <div class="box theme-box" id="darkmode-switch">
                        <span class="fa fa-adjust"></span>
                    </div>
                
                
            </div>
            <div class="box gotop-box">
                <span class="fa fa-chevron-up"></span>
            </div>
        </div>
    </div>
</footer>
</div>
</div>

        <script defer src="https://unpkg.com/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script>
    if (!window.kr) {
        window.kr = {};
    }
    window.kr.notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));
    window.kr.siteRoot = "/";
</script>


    <script async src="/js/candy.min.js"></script>



    <script defer src="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
    
    <script defer src="https://unpkg.com/meting@2/dist/Meting.min.js"></script>
    <meting-js
        server="netease"
        type="song"
        id="1375305989"
        order="random"
        fixed="true"
    >
    </meting-js>



    <script defer src="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script defer src="https://unpkg.com/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script defer src="/js/kratosr.min.js"></script>
<script defer src="/js/pjax.min.js"></script>


    <script defer src="/js/kr-dark.min.js"></script>



<!-- Extra support for third-party plguins  -->


    </body>
</html>